Positioning content after fixed header [SOLVED]

@media (max-width: 650px) {
  #container {
    margin-top: 200px;
  }
}
#container {
  margin: auto;
  
  maxwidth: 800px;
  width: 100%;
  text-align: center;
  margin-top: 100px;
}

I have this code here that’s supposed to put the main container under the fixed heading, however the media doesn’t work for whatever reason. When I resize the window to a small enough size, the container doesn’t go down and is overlaid by the fixed header which is set to get bigger when resizing.

code: https://codepen.io/egondohr22/pen/wvrdLzr

Please provide a link to your entire code rather than just a small snippet.

i’ve put it now, didn’t provided it initially thinking that no one would bother looking over it

A couple of things you can revisit;

  1. The C in CSS means cascade. If you have a media query that defines what an id should do and then right after that media query you define what the id should do, what happens?
  2. while not the cause of your issue, do you see a typo here? maxwidth: 800px;

Lol, I thought that in css the orded in which I define things doesn’t matter and didn’t think of it for a second. Thank you so much.