During my responsiveness testing, I came across a very strange issue. I have code that aligns the header as a flexbox, but when I resize the window to over 900px in width, the navbar moves out of the header and appears on top of the next element.
Here's an example:
https://i.sstatic.net/2Xl20.png
This strange behavior occurs until the width reaches 1205px, after which it displays as expected.
Like this:
https://i.sstatic.net/erutj.png
The issue depicted in the first image shouldn't be happening because I added a media query specifically for desktop screens.
Below is the key code snippet for that section:
HTML:
<header>
<a href="#"><img class="logo" src="images/img-tea-cozy-logo.webp" alt="The Tea Cozy Logo"></a>
<nav>
<ul class="bar">
<li><a href="#mission">Mission</a></li>
<li><a href="#featured">Featured Tea</a></li>
<li><a href="#locations">Locations</a></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 here 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 strangest thing happened when I mistakenly inserted "and" after the condition, like this:
@media only screen and (min-width: 900px) and {
...
}
To my surprise, the issue was resolved even though the syntax was incorrect:
https://i.sstatic.net/7LWjy.png
I'm seeking help to understand what's going on here and how to fix the problem shown in the first image.