Preformatted textTell us what’s happening:
please I need someone to help on how i can stop the left side of the document from scrolling into the right side.
How can iIalso have the scroll side bar beside the #navbar section?
It seems to be working on codepen but not on freecodecamp.
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the line above and the line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
I played with your codepen and I can see the issue when I click on the table of contents. It seems though your html has some (one or more) mistakes.
They must be fixed first before any progress is to be made.
<li>Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:
This line is missing the end tag.
(Also I noticed that you create li tags but you didn’t nest them inside a ul tag)
There are more. Please click on the “Analyze HTML” menu item in the codepen (it is in the dropdown menu for the HTML editor)
Edit: other thoughts on layout
The layout of the page works only if someone is viewing the page in ‘full screen’ mode all the time. if they change the size of the viewport and click anything in the TOC, the page will refresh and try to re-layout the elements. It will fail to fit everything in though because the viewport width became too small.
I would strongly suggest therefore not using the current layout method and instead switching to a grid layout.
(Review grid layouts here: How to Use CSS Grid Layout – Grid Properties Explained with Examples )