Flexbox nav elements overflow on their own in the most weird manner - html

Question

While testing responsiveness, I encountered the most weird problem. I have these codes for aligning the header as a flexbox and when I resize it over 900px width, the navbar gets out of the header and shows on top of the next element.
Like this:
This thing happens up until 1205px width and then it gets the way I expect it.
Like this:
The anomaly in the first image shouldn't happen because of the media query I have added for Desktop screens.
This is the main code for that part:
HTML:
<header>
<img class="logo" src="images/img-tea-cozy-logo.webp" alt="The Tea Cozy Logo">
<nav>
<ul class="bar">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</nav>
</header>
CSS:
/* Header */
header {
max-width: 100%;
height: 4.54em;
border-bottom: 1px solid seashell;
display: flex;
align-items: center;
flex-direction: column;
background-color: black;
}
header a img {
height: 2.18em;
margin-top: 0.45em;
}
nav ul li {
display: inline-flex;
text-decoration: underline;
padding: 0.13em 0.25rem 0 0.25rem;
}
nav ul li a {
color: seashell;
}
And this is the media query for Desktop:
/* Header for Desktop Screens */
#media only screen and (min-width: 900px) {
header {
height: 3.13em;
justify-content: space-between;
}
header a img {
height: 2.27em;
margin: 0.30em 0 0 0.45em;
}
nav ul li {
padding: 0;
margin: 0.45em 0.45em;
font-size: 1em;
}
}
The weirdest thing happened when I inserted "and" after the condition, like this:
#media only screen and (min-width: 900px) and {
...
}
Then it got fixed while it shouldn't have because that's just not the right syntax:
Can anyone help me understand what's happening here and how to fix the problem in the first image?

Answer 1

You forgot to define flex-direction: row for the media query:
/* Header */
header {
max-width: 100%;
height: 4.54em;
border-bottom: 1px solid seashell;
display: flex;
align-items: center;
flex-direction: column;
background-color: black;
}
header a img {
height: 2.18em;
margin-top: 0.45em;
}
nav ul li {
display: inline-flex;
text-decoration: underline;
padding: 0.13em 0.25rem 0 0.25rem;
}
nav ul li a {
color: seashell;
}
/* Header for Desktop Screens */
#media only screen and (min-width: 900px) {
header {
height: 3.13em;
justify-content: space-between;
flex-direction: row;
}
header a img {
height: 2.27em;
margin: 0.30em 0 0 0.45em;
}
nav ul li {
padding: 0;
margin: 0.45em 0.45em;
font-size: 1em;
}
}
<header>
<img class="logo" src="images/img-tea-cozy-logo.webp" alt="The Tea Cozy Logo">
<nav>
<ul class="bar">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</nav>
</header>