onepager in wordpress smoothscrolling is not working very wel only on contact section!other sections are working very wel?

I have build one pager website in wordpress,
everything was working perfect untill I divided contact section in 2 sections.
section-left and section-right .
on the left-section I have paste wpform plug in code for contact-form.
this is the HTML code:

    <section id="about">
<div class="scroll-target">
<div class="about-section-left-side">
<h3>About</h3>
<paragraph>
and scrambtemore recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. I</paragraph></div>
<div class="about-section-right-side"><img src="https://webdesignmaster.eu/wp-content/uploads/2023/08/test-image-for-website1.webp" alt="Website bouwen in Hoogvliet"></div>
</div>
</section>
<section id="webdesign">
<div class="scroll-target">
<div class="webdesign-section-left-side"><img src="https://webdesignmaster.eu/wp-content/uploads/2023/08/try-image1.webp" alt="webdesign"></div>
<div class="webdesign-section-right-side">
<h3>Webdesign</h3>
<paragraph>
text em Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy te<paragraph></div>
</div>
</section>
<section id="onepager">
<div class="scroll-target">
<div class="onepager-section-left-side">
<h3>OnePager</h3>
<paragraph>
only five centuries, but also the leap into electronic typesetting, remaining essentially the 1500s, when an unknown printer to  Lorem Ipsum has been the industry's standard dummy te<paragraph></div>
<div class="onepager-section-right-side"><img src="https://webdesignmaster.eu/wp-content/uploads/2023/08/tekst-image3-for-webdesign.webp" alt="website bouwen"></div>
</div>
</section>
<section id="contact">
<div class="scroll-target">
<div class="contact-section-left-side">
<h3>Contact</h3>
[wpforms id="126"]

</div>
<div class="contact-section-right-side">
<div class="first-section">
<h2>WIJ HELPEN JOU GRAAG!</h2>
<h3>We zijn bereikbaar op:</h3>
<h4>
Maandag t/m vrijdag: 9:00 uur tot 20:00 uur
Zaterdag & zondag: 10:00 uur tot 18:00 uur</h4>
</div>
<div class="second-section">
<h1>Langskomen op afspraak!</h1>
<h2>Telefoonnumer: 06xxxxxx</h2>
</div>
</div>
</div>
</section>

and this is CSS code:

.contact-section-right-side .second-section {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border:1px solid #e7f5fb;
    max-width:600px;
    width:100%;
     height:200px;
    margin-top:2rem;
    position: relative; /* Add this to establish a positioning context for the pseudo-element */
    background-image: url('https://webdesignmaster.eu/wp-content/uploads/2023/08/contact-section-image.jpg'); 
  background-size: cover; 
  background-position: center center; /* Center the image within the container */
     
}

.contact-section-right-side .second-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background-color: #4b5054; /* Lighter overlay color */
  opacity: 0.7; /*
 /* background-color: rgba(255, 255, 255, 0.8); /* Lighter overlay color with reduced opacity */
  z-index: 1; /* Place the overlay above the background image */
}


.second-section h1 {
    display:flex;
    justify-content:center;
    padding-top:-4.5rem;
    color:black;
}
.second-section h2 {
    display:flex;
    justify-content:center;
    margin-top:-1.25rem;
    color:#ffd978;
}

section {
     
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: black;
  min-height: 500px; /* Adjust this value as needed */
}




html {
  scroll-behavior: smooth;
} 

and this is javascript code:

<script>

function scrollToSection(sectionId) {
  const section = document.getElementById(sectionId);
  const offset = sectionId === 'contact' ? -100 : 5; // Adjust the offset as needed
  if (section) {
    window.scrollTo({
      top: section.offsetTop + offset,
      behavior: 'smooth'
    });
  }
} 

</script>

and this is the link:
https://webdesignmaster.eu/

and this is the CODE in header.php

<nav>
  <ul>
        
    <li><a href="https://webdesignmaster.eu/#about" onclick="scrollToSection('#about')">About</a></li>
    <li><a href="https://webdesignmaster.eu/#webdesign" onclick="scrollToSection('#webdesign')">Webdesign</a></li>
    <li><a href="https://webdesignmaster.eu/#onepager" onclick="scrollToSection('#onepager')">OnePager</a></li>
    <li><a href="https://webdesignmaster.eu/#contact" onclick="scrollToSection('#contact')">Contact</a></li>
  </ul>
</nav>  

now the problem is when I click on contact section in the menu the scroller goes after the contact section on the name field of wpform on not on contact section exactly . the other sections scrolling is working very wel. there is little deviation. I tried evrything I disabled all plug in. it didn’t help, I have changed min-height it didn’t help. I have changed the offset number it did’nt help. what it can be the problem or how I can solve this problem?
thanks