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

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)

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?

already found the answer haha!

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

hope this helps other beginners when they need it.