Product Landing Page (navbar, media queries and flexbox issues)

Hi,

How do I put the navbar at the top of the viewport?
I dont know if my media query works.
When I code a flexbox in CSS, it is not displayed.

This is what I got so far: https://codepen.io/cavertronickx/pen/gObWZEp

The media query is doing something. What are you expecting to see when the screen width is 650px or smaller?

What makes you think it is not displayed?

What browser are you using?

Hello,

I started coding a few days ago and with no background in programming whatsoever, I still do not fully control the jargon. OK, so media queries are for organizing the website h1, h2, p, etc, when reducing or expanding the window (I saw the FCC explanation but did not get it till now). I think I am using Chrome as a search engine, I thought we utilize flexbox to set the location of tabs and text on the site and that is why mine is so messy, each time I introduced “#” and its corresponding tag it does not change anything, for example

#beers {
  margin-top: 100px;
}

should be above the image