Make size of <main> and <nav> consistent across screen sizes

Question

This is probably a very basic question (outing myself as a noob) but I'm stumped. I have a website I'm building where each page has a bunch of text and other elements, and a sidebar navigation that's sticky.

To do this, I've used a <main> element which I've formatted as a grid, and allocated some space on the left to the <nav> and the rest to the main text etc. However, I'm struggling to figure out how to keep the positioning consistent across screen sizes. I want the size of the whole element (the <nav> and the <main> to take up roughly the whole screen if on a small laptop screen (eg 11") but not necessarily get larger (ie the margin expands?) on larger desktop monitors. I want the ~90% of the <main> that I have dedicated to the content to stay centered on every page it's on, and the nav to slightly off-center on the left.

To demonstrate with a reprex, here's what I want it to look like roughly:

With a smaller laptop-sized screen. However, with a larger screen (eg my 27" desktop screen) it looks like this:

I am trying to use a % margin in the css

main {
  display: grid;
  grid-template-columns: 15em 1fr;
  max-width: 100em;
  margin: auto 10% auto auto;
}

But that's clearly not working. I'm still a html/css newbie, so hoping someone can help me with what I'm sure is quite an easy fix?

I made a CODEPEN EXAMPLE if that's helpful?

Thanks in advance!!

Answer 1

So it turns out someone has come up with a good way to do this already!! https://codepen.io/ragdoll/pen/KKXaNP shows how to do it by approximating a min-margin even though there isn't any such thing, but it works equivalently