smooth scrolling has deviation on the last section?

hello,

I know that in this thread includes js code and I know that this is not js forum ,but because it is everything else wordpress forum . I wil ask this question .

it is also not exactly js problem . it has to do with html and css and specially section targetting or smoothscrolling

first this is html code :

<section id="about">
<div class="scroll-target">
<div class="about-section-left-side">
<h3>About</h3>
<paragraph>
Lorem Ipsum is simply dummy text of the printing and typesett 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>
orem Ipsum is simpl 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>
orem er since the 1500s, when an unknown printer took a galley of e 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 small part css:

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;
} 

only with html and css with smooth scroller css code was one pager was working very wel in the begin but after it began a little deviation when I clicked on contact section.

I tried to change height to 60vh (in section) etc but it didn’t help .

so I tried js code which is :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<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 in header.php :

	<nav>
  <ul>
    <li><a  onclick="scrollToSection('#about')">About</a></li>
    <li><a  onclick="scrollToSection('#webdesign')">Webdesign</a></li>
    <li><a  onclick="scrollToSection('#onepager')">OnePager</a></li>
    <li><a  onclick="scrollToSection('#contact')">Contact</a></li>
  </ul>
</nav>	

it was working very wel after I inserted js code untill I made in contact section onother right-side section. class which you can see on my website.

it is not targetting anymore the contact section but the first field of wpform.

I have disabled wpform but the problem is the same. I added extra class above contact section but it didn’t help . I have changed js code but the problem is not solved.

I want only to know or some idea where it can the problem relies .

actually smoothscroll css code must be enough to function one page scrolling with custom links . can I solve this problem with css and html or I have to look for js libray or some examples in code pen . actually I have this code from code pen and there is working very perfect . I know there is difference between html and wordpress .

can some one expert tell me how I can solve this problem or at least where I have to look in js or in css?

I am all the day bussy only to solve this problem. I have also solved typewritter effect js problem. after all I tried free version of onepress but it is not for me .

you have to see also I am using flex maybe there can be some clue?

I have to solve this problem myself and it has to be.

thanks

The page I need help with: [log in to see the link]