One Page Anchor scroll leaving space on top

Question

I have a one page website on Divi (Wordpress). I have created a Menu with anchor links that navigates to different sections of the page. These Menu links are not in the format of <a href="">. They are in the form of <div class=""><p>Menu-Name</p></div>.

The problem is when i click on the Menu its successfully navigating to the target section but its Leaving space on top like 200px. Its doing this for all sections. Note: All my sections are using a 100vh height.

How best can i avoid this space so whenever i follow the anchor links it displays the section with 100vh without any space on top.

I tried using js and it didnt work

document.getElementById("side_nav_item_id_2").addEventListener("click", function(event) {
  event.preventDefault();
  var target = document.getElementById("target-section");
  var offset = target.getBoundingClientRect().top + window.scrollY;
  window.scrollTo({ top: offset, behavior: 'smooth' });
});