body { display: grid; }
body > header { grid-area: header; }
body > main { grid-area: main; }
body > footer { grid-area: footer; }
body > nav { grid-area: nav; }

table { width: 100%; }
pre { max-width: 90vw; overflow-x: auto; }

@media screen and (max-width: 900px) {
  body {
    grid-template-areas:
      'header'
      'nav'
      'main'
      'footer';
    padding: 1vh 1vw;
  }

  body > nav > ul {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 901px) {
  body {
    grid-template-areas:
      'nav header'
      'nav main'
      'nav footer';
    column-gap: 2ch;
    margin: auto;
    max-width: 1000px;
    font-size: 1.5em;
  }

  header, main, footer {
    max-width: 800px;
  }
}
body { display: grid; }
body > header { grid-area: header; }
body > main { grid-area: main; }
body > footer { grid-area: footer; }
body > nav { grid-area: nav; }

table { width: 100%; }
pre { max-width: 90vw; overflow-x: auto; }

@media screen and (max-width: 900px) {
  body {
    grid-template-areas:
      'header'
      'nav'
      'main'
      'footer';
    padding: 1vh 1vw;
  }

  body > nav > ul {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 901px) {
  body {
    grid-template-areas:
      'nav header'
      'nav main'
      'nav footer';
    column-gap: 2ch;
    margin: auto;
    max-width: 1000px;
    font-size: 1.5em;
  }

  header, main, footer {
    max-width: 800px;
  }

  nav > ul {
    position: sticky;
    margin-top: 24px;
    top: 24px;
  }
}
Make navbar sticky on desktop
Make navbar sticky on desktop
