Technical Documentation Page -- strange scrolling behavior

HTML-CSS
#1

I’m working on the technical documentation page , which requires the implementation of a side-nav. I’ve made a side-nav, but the behavior is a little strange and I can’t figure out why. Here’s a link to the Codepen:

https://codepen.io/aemann2/pen/NWRzpdj

Whenever you click on one of the links in the side-nav, the page scrolls twice: once so that the top of the main content box meets the top of the page, and again within the content box to pull up the selected section.

How do I get prevent the first scroll, and just have the content within the main content box scroll to the selected section?

#2

First things first @aemann2 . Before you start styling and trying to get things to fit it would be best if you concentrated on fulfilling the user stories.

Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)

  • The test script should be included, with all tests passing, when you submit your projects.
  • Your page passes 10/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)