My logo goes up while i scale my browser

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/projects/tea-cozy

whenever i scale my browser this things happen
Screenshot (171)
below is my code:

Document body{ font-family: Helvetica; font-size: 22px; color: seashell; background-color: black; opacity: 0.9; text-align: center; }

header{
width: 100%;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
z-index: 10;
align-content: center;

}

header img{
height: 50px;
padding-left: 10px;
}
nav{
flex-grow: 1;
display: block;
text-align: right;

}
header ul{
list-style-type: none;

}
header li{
display: inline-block;
text-decoration: underline;
padding: 20px 10px;

}
.flex-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;

}

<header class="flex-container">

    <img src="./image/logo.png" />

    <nav>

        <ul>

            <li><a> Mission </a></li>

            <li><a> Featured Tea</a></li>

            <li><a> Locations </a></li>

        </ul>

    </nav>

</header>