Landing Page -- position:fixed;

Programming
,
1

Tell us what’s happening:
I can’t figure out how to get the header/nav fixed at the top without breaking the rest of the page. I had it passing everything a few weeks ago and came back today to finish it, only to find I’m not passing everything anymore. I tried to find out how to fix this, and all I could find was that I need a position: fixed; somewhere in the header or one of its children (I thought I already had it there, but it seems I must have removed it). I don’t know where to put this without breaking the rest of it.

Also, I was having issues with getting everything to look right at different sizes with the media queries. And I need to align the footer and have been having issues with that, however those things aren’t really a main concern atm.

I appreciate another set of eyes on this. Thanks for looking.

Your code so far
https://codepen.io/aChtourou/pen/dyOXxLb

Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

Challenge: Build a Product Landing Page
Link to the challenge:

2

Setting the position to sticky would work better:

#header {
  position: sticky;
  z-index: 100;
  background: white;
}

The z-index makes sure the nav is on top of everything else.
You don’t need either the z-index or background. Those are optional, it just looks better with them.

Hope this works!