Когда задана ширина 1000px в медиа-запросе все ок, но только она становится меньше 980px почему-то не работает, на jsfiddle код работает браузер(chrome). Не могу понять в чем проблема, может кто-то знает как это исправить. Вот код:
#header {
width: 80%;
padding-top: 30px;
padding-bottom: 30px;
margin: 0 auto;
}
.container1 {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background: green;
}
.menu-icon {
order: 1;
}
.menu {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
flex-basis: 65%;
font-family: "Poppins";
text-decoration: none;
text-transform: none;
list-style-type: none;
align-self: center;
font-weight: bold;
}
.menu li a {
color: #333333;
text-decoration: none;
font-size: 14px;
}
@media screen and (max-width: 979px) {
.container1 {
display: flex;
background: black;
}
}
<div id="header">
<div class="container1">
<div class="imgone">
<img src="img/logo.png" alt="logo">
</div>
<ul class="menu">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Focus</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Work Steps</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<head>
. – E_K 24 сен '18 в 11:55