How do I stop my body element from scrolling behind my nav bar?

I'm completely new to front end and have been coding using html and css for 3-4 months.

I'm currently completing a free course on free code camp and I'm currently working on a technical document page.

My main issue is figuring out how to stop my body element from scrolling behind my nav bar which is positioned on the left. I want the body element to only scroll upwards/downwards.

my second issue is figuring out how to build my list items with the top and bottom borders surrounding the list items fully extending within the nav bar

here is my project --> https://codepen.io/kboogie/pen/zYzBwXa

Thanks for the help and sorry for poor explanation

body { line-height: 30px;
  min-width: 100%;
  font-family: Azeret Mono, monospace;
  padding-left: 250px;
}

#navbar { position: fixed;
  left: 0px;
  top: 0px;
  height: 100%; 
  border-right: solid;
  border-color: rgba(44, 187, 0, 0.603); 
  background-color: rgb(223, 253, 170);}

header { 
  text-align:left;
}
.head-n { text-align: center;}

li { 
  padding-right: 10px;
  list-style: none;
}

Solution

Here is a solution to your first problem. The issue comes from setting the min-width: 100% and padding-left: 250px. This will cause all of the content to be 100% of the width plus an extra 250px. This will always result in content that is too big to fit on the screen. That is what is causing the horizontal scroll bar.

To fix this you should remove min-width: 100% from body{}. There is no need for this style since the text will automatically wrap regardless of the size of the screen.