верстаю страничку но возникла проблема при адаптации меню (на телефон) не работает flex-wrap: wrap; меню не ломается

Question

*::before
*::after{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
img{
    vertical-align: top;
}
body{
    height: 100%;
    line-height: 1;
    font-size: 14px;
    font-weight: 500 ;
    color: black;
    font-family: Montserrat, serif;
}
.wrapper{
    min-height: 100%;
    overflow: hidden;
}
._container{
    max-width: 1046px;
    margin: 0px auto;
    padding: 0px 15px ;
    box-sizing: content-box;
}

/*
.................шапка .............................................................
*/
.header{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 50;
}

.header_container{
    display: flex;
    min-height: 104px;
    align-items: center;

}
.header_logo{
    font-size: 24px;
    font-weight: 700;
    color:inherit;

}
.header_menu{
    margin: 0px 0px 0px 450px;
}
.menu{

}
/*
вот тут добавил flex-wrap: wrap; но ничего не работает
*/
.menu_list{
    flex-wrap: wrap;
    display: flex;
}

.menu_item{

}
.menu_item:not(:last-child){
    margin: 0px 21px 0px 0px ;
}
.menu_link{
    font-weight: 600;
   line-height: calc(24/14*100%);
}
.header_cor{
    margin: 0px 0px 0px 39px ;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="1.css">
    <link rel="stylesheet" href="LIegal.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


</head>
<body>
         <div class="wrapper">
                <header class="header">
               <div class="header_container _container">
                   <a href="" class="header_logo">
                       Relvise
                   </a>
                   <nav class="header_menu menu">
                       <ul class="menu_list">
                           <li class="menu_item">
                               <a href="" class="menu_link">Home</a>
                           </li>
                           <li class="menu_item">
                               <a href="" class="menu_link">Product</a>
                           </li>
                           <li class="menu_item">
                               <a href="" class="menu_link">Pricing</a>
                           </li>
                           <li class="menu_item">
                               <a href="" class="menu_link">Contact</a>
                           </li>

                           <div class="header_cor">

                               <img src="imd/Vector11.png" height="16" width="16"/>
                           <img src="imd/Vector 22.png" height="12" width="16"/>
                               </div>
                       </ul>
                   </nav>
         </div>
         </header>
</div>
</body>
</html>

Элемент списка

БЛОГ НА HUSL

верстаю страничку но возникла проблема при адаптации меню (на телефон) не работает flex-wrap: wrap; меню не ломается

Ответы (0 шт):