css media query not working for specific div? - css

Question

To make sure the media query was actually working and the problem not being me setting the wrong max-width, I set the nav bar to change color and height when the max width was reached. My main goal was for the search bar to move further to the left but this doesn't work (the change in background color was for visual purposes). Why is this so? I'm trying to reposition the search bar as it glitches once the screen gets smaller.
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: rgb(255, 255, 255);
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>

Answer 1

Your media query is working as expected: The background-colors are applied and the height is set. The background-color for .search wasn't so good visible because the search input has a width: 0px - therefor i tested with 50px. The change of the height wasn't visible because everything was white - therefor i tested with:
nav {
background-color: #ccc;
}
Now you can see that on big screens the nav has no height (= auto) and on small screens 40px (use the browsers dev tools).
Working example:
nav {
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
Alternative example:
with display: flex for the whole nav container and deactivated transform for the ul in the media query
nav {
display: flex;
justify-content: space-between;
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
nav ul {
transform: none;
}
.search {
background-color: indigo;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>

Answer 2

If it is not working for all the div's, check if you forgot to put <meta content="width=device-width, initial-scale=1" name="viewport" /> inside your <head> </head> tags where you have your HTML code. This should do the trick.