Не работают брейкпоинты css

Question

В данном случае не понимаю, почему при срабатывании брейкпоинта Contacts всё равно уходит на другую строчку. Помогите пожалуйста, я только начал верстать, а уже чувствую, что моя душа покидает тело из-за адаптива

@font-face {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Bold'), url('Gilroy-Bold.woff') format('woff');
    }

* {
margin: 0;
padding: 0; 
}
.header {
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 50;    
}
.header__container {
border: 1px double black;
max-width: 960px;
margin: 0px auto;
min-height: 33px;
display: flex;
align-items: center;
box-sizing: content-box;
padding: 0px, 15px;     
}
.wrapper {
min-height: 100%;   
}
.menu-list {
list-style-type: none;
display: flex;
flex-wrap: wrap;

}
.menu-item {
display: flex;
font-family: 'Gilroy-Bold';
font-size: 18px;

line-height: 20px;  

}
.menu-item:not(:last-child) {
margin: 0px 155px 0px 0px;  
}


._container {
border: 1px double black;
max-width: 960px;
margin: 0px auto;
display: flex;
align-items: center;
box-sizing: content-box;
padding: 0px, 15px;
}
@media (max-width: 938px) {
.menu-item {

margin-left:not(:last-child): 100px;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1">
</head>
<body>
<div class="wrapper">
<header class="header"> 
<div class="header__container _container">
<div class="menu">
<ul class="menu-list">
<li class="menu-item">Home</li>
<li class="menu-item">About me</li>
<li class="menu-item">Skills</li>
<li class="menu-item">Portfolio</li>
<li class="menu-item">Contacts</li>
</ul>

</div>
</div>  
</header>

</div>
</body>
</html>

БЛОГ НА HUSL

Не работают брейкпоинты css

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