Technical Documentation Page - Scroll bar issues

HTML-CSS
1

Hi
I need assistance in the scrolling.

I want my section to scroll like how this scrolls

where the nav bar on the left stays still, and only the main section scrolls.
Currently its my nav bar that’s moving up and down the page overall…

Or is it not doable if I have a heading up top…?

In addition, something seems to be overfilling the page horizontally as well.
If I remove the “display” section then its fine…I m thinking that this is relevant to my above question as well
as I think it is the page scrolling thats causing the overfilling horizontally as well…

Please assist

Below is my codepen:

I have also created one with partial heading…with this scrolling up down seems good now.
But I still have overflow horizontally and still can’t figure out what it is :sob:

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Hey, just looked at your CodePen in Google DevTools. The body has width 100vw. Turning this on and off removes the horizontal scroll bar.

On the .sizeflex class, you may want to remove the margin-left: 18.75rem. It is causing the scrollbar to return at a smaller screen width.