Grid Columns Overlapping

1

Hello, I would appreciate some help on my technical document project which is using a grid layout. The main document overlaps with the navigation bar when I make the screen size smaller. I’ve been trying to solve this issue but no luck so far. Thank you for your time.
Technical Documentation Project

2

How about using more media queries to make the second column use less fr units? For example,

@media screen and (max-width: 1200px) {
  #container {
    grid-template-columns: 1fr 2fr;
  }
}

Not related, but in your media query at the bottom, I think you meant position: static, not display: static

3

Thank you. That helps solve the issue of the overlap. Can I also ask if you know why the navbar does not shift to the top of the page when the screen size gets small? And yes, I meant to type
position: static. Thanks for pointing that out.

4

Fixing display: static like I mentioned should fix that.