Grid Columns Overlapping

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

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

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.

Fixing display: static like I mentioned should fix that.