Requesting Technical Documentation Feedback Please

This one took a lot longer than I thought it would. Initially I had trouble with content overlapping between the #navbar and #main-doc. I tried all sorts of things, different position properties, overflow, overflow-wrap, z-index, word-break, margin, padding ect.

In the end, I realized that background-color of boxes is not inherited but rather set to transparent by default. That, and having my #main-doc set to position: absolute; is I think what was causing my problems.

Would someone have a quick glance and tell me if I’ve set up my side nav correctly?

Another thing I struggled with was the <code> element. Specifically, trying to find a way to make it wrap and escaping html tags. Is there a way to escape html tags without using javascript? I figured that was what the code element was for but that didn’t work for me. As for wrapping it, I opted with giving it overflow: auto instead.

Last thing. Codepen validates my html and css as no errors but when I use the W3C validators, it finds bad values set for width and height on the iframes in the HTML. Can I ignore this? For the CSS it says parse error involving the :root pseudo class. Should I ignore this?

Thanks for your time.