Technical document page-a few issues

Sup guys,

I’ve been working on my technical document page and have run into some issues that I can’t figure out.

  1. On an actual desktop, the html elements do not fit the screen and thus a scroll bar appears at the bottom. The user would have to zoom out to about 80% (at least for me) to have everything fit nicely. Don’t know how to make it so that the elements can fit larger screens.

  2. When the scrollbar appears at the bottom and you scroll to the right, the information section collides with the menu. Don’t know how to keep the information section from colliding with the menu section.

  3. Same as the first issue but on small screens. I am trying to make this page mobile friendly, but I am having trouble making the html elements fit the screen and not have it give me a scrollbar.

I have been messing around with media queries but can’t seem to get it. Any help is much appreciated!
My code: https://codepen.io/jmrtinz15/full/MWWGydB

You need to add the following two lines inside the element body { }

overflow-y: auto;
overflow-x: hidden;

and change your #main-doc to relative instead of absolute.

position: relative;