Still confused at CSS Grid columns

HTML-CSS
1

I’m doing the Technical Documentation project and I’m using CSS Grid for the web layout. But after laying out the header, nav, and content, it seems that the content is not occupying the whole space whenever i put ‘position: fixed’ on my navbar. But my aim is to have a fixed header and navbar. and when I resize my window, it seems that texts are not flawlessly wrapping it’s just responding on the window size and you will see that there’s a white blank on the side that covers the space when you resize it. I really want to understand why is this happening.

Here’s my code: https://codepen.io/knicole/pen/XxoQOv

2

I know why that is happening. I’m not sure what to do about though.

Once you made that position fixed it was no longer a grid item so the style supplied by the grid no longer applies.

EDIT: Easier than I thought. This guy has a simple demo

#wrapper-nav {
  grid-area: nav;
  background-color: #2F2F2F;
  margin: 0;
  padding: 10px 0;
  height: 83%;
  position: fixed;
  width:200px; /*this*/
  height:100%;  /*this*/
  top: 100px;
  overflow-y: auto;
  background:black;
}