Help with Internal Navigation in Product Landing Page

Hello, I need help with one aspect of my Product Landing Page. I’ve been trying to fix the navigation links on my webpage from passing the beginning of the section they are meant to go to. I’ve added the code below for each section and it only works for the first section (build). I’m not worried about the last section (contact) but would like to fix the second section (repair) from passing the header of that section. I know I could add more padding but would like to know if there is another way that won’t add space between the sections and make it look awkward. The only time the sections are aligned right is when the screen is 768 x 1024.

Here’s the CSS I used for each section:

#build .anchor::before {
  content: ' ';
  display: block;
  height: 220px;
  width: 100vw;
  margin-top: -220px;
  visibility: hidden;
}

Here’s the link to Product Landing Page: https://tymx.github.io/zapp_computer_services/
Here’s the link to the repository: https://github.com/tymx/zapp_computer_services/tree/gh-pages

Thank you for anyone who reads this and takes the time to help me out.

(https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/)

Thank you so much for the article! I was able to fix it for all common screen sizes.