Product-landing Challenge: internal links are not linking to the correct element

https://codepen.io/Mijhi/pen/ZEzZWKQ?editors=1100

It’s not completely done.
I stopped because i noticed a problem with my internal links. They’re linking to weird places, and i can’t figure out what it might be. I’ve searched online for answers but I can’t seem to find one that works for me.
Help would be very much appreciated! Thank you!

When i click the feature button it should scroll me down to Hand-made, but what i get is this


It takes me to the bottom of the features list.

The same thing happens when i click How-to-play.
I’m not sure what is causing this? I feel that it has to do something with my margins but i’m not sure

It is going to the right place but you header is covering over the top of where that section starts. If you remove the postion fixed you can see that it is going to the right spot.

I had this happen on a project once and I thought of two ways to fix it. The first being to add a div before that item so it showed up in the right spot and point my href to that div, but not wanting to add more markup than needed I went with option two. Which was to hide the header and navbar if the mouse hadn’t moved for a set period of time. I think it was 1.5 seconds. So after that period of time it would disappear and if the user moved the mouse again it would show back up.

Also it might be worth mentioning you can add: scroll-behavior: smooth to make it scroll to those items more smoothly instead of just jumping to that section.

Oh it worked! Thank you so much!