why my site page topic behindnavbar (bootstrap)?

Issue

I try to see when I click navbar then I want to see the topic, but it is showing the topic under navbar. I try to give margin, but it doesn't work. Is someone help me with how can I solve this problem.

Web site showing like that

But I want to see like that

there is code: https://codepen.io/rero34/pen/mdqGyVo

Solution

So you are using Bootstrap which is great. But my first impression was you have too many manual styles going on, especially for using a CSS framework. Without over-explaining it, the main reason your anchors aren't starting at the top of the section is because your id's are starting at the span, which is not the start of the section. You should put the id's on the sections themselves.

Then, the next issue comes from the use of padding on your sections and excessive margins on headings. Without going through and cleaning all of those up, let's look at ways around it.

scroll-margin is used to adjust an element’s snap area (the box that defines where the element will be snapped to).

I added some scroll-margin-top on each section. I found that roughly 5.5em is the sweet spot in your case.

Your code has too many characters for a stack snippet, so take a look in the CodePen.

Answered By - カメロン