Product Landing Page- Text alignment problems within a flexbox and media query

HTML-CSS
#1

Hello,

I’ve got a relatively simple problem that just popped up. I’m creating a design template for my product landing page and using a flexbox to design the header. As you can see, I’ve created the design outline using random colors just so I can see where and how the flexbox is working. The end will all be the same background color (probably white).

There is a media query with different css code for when the viewport is less that 500px. As you can see, my placeholder text where the navigation links will be always falls just outside of the main flex container.

The text should falls within the .header-nav-container div tag in the html code. Why does it appear below the box?

Here’s a link to the project:
https://codepen.io/artbaker82/pen/poEZwPJ?editors=1000

Thanks a lot!

#2

this is because of the height of your div

#3

Your using the height property where you don’t need it. Get rid of all of those heights and it will work fine.

#4

Yes this worked, thank you!