When adding the media query, the nav bar does not display - html

Question

Hope someone can help me here.
I initially design the web page for a desk top.
now I am trying to gracefully - degrade, and add features for smaller screens.
What happens now, is that the navbar does not show up at all.
the header is a flex container that has 2 nested flex containers within it.
The one on the right is supposed to display, unless the screen goes below 376px.
I am not sure why...
.nav-container {
flex-direction: column;
display: flex;
width: 100vw;
max-width: 100%;
height: auto;
background-color: #0092FF;
}
header {
display: flex;
width: 100%;
height: 80px;
flex-direction: row;
flex-shrink: 0;
top: 0px;
}
header nav .logo {
float: left;
margin-left: 6.25em;
margin-top: 22px;
width: 215px;
height: 40px;
}
header nav .menu .menu-item {
display: none;
/* position: absolute;
z-index: 100;
*/
}
#media screen and (min-width:23.5em) {
header nav .menu {
display: inline-block;
display: flex;
margin-right: 6.25em;
margin-top: 0;
justify-content: flex-end;
}
header nav .menu .menu-item .nav-link {
flex-direction: row;
padding-right: 60px;
display: inline-block;
margin-top: 31px;
font-size: 1.125em;
font: Semibold 18px/22px Proxima Nova;
align-items: center;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
text-decoration: none;
outline: none;
}
header nav .menu-item .login {
display: inline-block;
width: 104px;
height: 40px;
background-color: Transparent;
color: white;
border: 2px solid #fff;
border-radius: 40px;
text-align: center;
outline: none;
vertical-align: middle;
text-decoration: none;
font-size: 1.125em;
margin-top: 22px;
}
}
<div>
<header class="nav-container">
<nav>
<div class="logo"><img src="./images/overpass.svg" alt="overpass"></div>
<ul class="menu">
<li class="menu-item">Features</li>
<li class="menu-item">Pricing</li>
<li class="menu-item"><button type="button" class="login">Login</button></li>
</ul>
</nav>
</header>
</div>

Answer 1

To show up the navbar, you need to add this in your media query :
header nav .menu .menu-item {
display: block;
}
For more explanation :
header nav .menu .menu-item .nav-link = each element with nav-link class in header > nav > .menu > .menu-item
header nav .menu-item .login = each element with login class in header > nav > .menu-item
header nav .menu .menu-item = each element with menu-item class in header > nav > .menu
So, if you set display: none; for .menu-item then you have to set display: block; (or other) for the same item, not nav-link or login class

Answer 2

I have applied the suggestion from above. it works now:
.nav-container {
flex-direction: column;
display: flex;
width: 100vw;
max-width: 100%;
height: auto;
background-color: #0092FF;
}
header {
display: flex;
width: 100%;
height: 80px;
flex-direction: row;
flex-shrink: 0;
top: 0px;
}
header nav .logo {
float: left;
margin-left: 6.25em;
margin-top: 22px;
width: 215px;
height: 40px;
}
header nav .menu .menu-item {
display: none;
/* position: absolute;
z-index: 100;
*/
}
#media screen and (min-width:23.5em) {
header nav .menu {
display: inline-block;
display: flex;
margin-right: 6.25em;
margin-top: 0;
justify-content: flex-end;
}
header nav .menu .menu-item {
display: inline-block;
flex-direction: row;
margin-top: 1.94em;
}
header nav .menu .menu-item .nav-link{
padding-right: 60px;
font-size: 1.125em;
font: Semibold 18px/22px Proxima Nova;
align-items: center;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
text-decoration: none;
outline: none;
}
header nav .menu-item .login {
display: inline-block;
width: 104px;
height: 40px;
background-color: Transparent;
color: white;
border: 2px solid #fff;
border-radius: 40px;
text-align: center;
outline: none;
vertical-align: middle;
text-decoration: none;
font-size: 1.125em;
margin-top: -0.5em;
}
}