Help about header nav anchor when click, it overlaps the header area

[xoctis]

when i click the overview nav, it becomes like this

my goal is to when we click the nav elements it’ll position at the bottom of the header nav area (not overlap)

update:
i already added a padding-top: at the #overview element. so the overview anchor is working as i wanted to be. but if i do the same thing to the other nav, it’ll display a ugly space to the body. or that’s the only way?

https://www.codecademy.com/workspaces/647a1b1646ef98cca2837606

[xoctis]

already found the answer haha!

it’s scroll-margin-top: 125px;

hope this helps other beginners when they need it.