I’m currently working on my technical documentation page project, and I decided not to use CSS grid, as it is not used in the reference Codepen project. I would really like to achieve the results in the reference using the same set of means.
My page looks fine when I open it, but when I click on one of the nav links in Chrome, the main content slides under the navbar, as if the margin-left were disappearing. When I test the same code in Firefox, I do not get this issue.
Also, the content of the main section seems to be too wide, and I keep getting a horizontal scroll bar at the bottom of the page, both in Chrome and in Firefox.
I have checked the reference page similarly, and these issue does not occur there. I have studied the CSS there back and forth, and I can’t figure out what part I am doing differently that ends up causing this issue. I would appreciate any tips and ideas for what to look into.
Here’s a screenshot of what I see in Chrome, and a link to my Codepen.
(Chrome screenshot)All the best and thanks in advance, Fox.
P.S.: Some of the text and design aren’t quite finished that, so never mind those for now, if possible, just the too wide content issue.