Why won't my hyperlinks to ID sections continue past the third page?

I'm working on a horizontally scrolling website, and I have 4 sections. Each section is ID'd as follows:

<section id="section1">
<section id="section2">
<section id="section3">
<section id="section4">

When you load the website, you are shown 'Section 1', and the text is hyperlinked to push you to #section2 when clicked. This works fine until it gets to the third section, when all of the a sudden the hyperlink that is suppose to push the user to #section4, pushes back to #section1.

I'm under the impression that it has something to do with container and section width, but I can't figure out the issue. I originally only had 3 sections, and could not get to section 3 unless I added section 4.

Codepen Link

Any help is appreciated, thank you

Solution

Use this approach by adding scroll-behavior:smooth and overflow-x:scroll css property with scroll bar hidden, no javascript is required

The actual problem is calculating the target position but this method quite simple and responsive

html {
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  font-family: Arial, sans-serif;
  scroll-behavior:smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
html::-webkit-scrollbar { 
width: 0;
height: 0;
}
nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1rem 0;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

.container {
  display: flex;
  flex-direction: row;
  width: 400vw;
}

section {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-sizing: border-box;
}


#section1 { background-color: #f1c40f; }
#section2 { background-color: #2ecc71; }
#section3 { background-color: #3498db; }
#section4 { background-color: #2ecc71; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Scrolling Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <div class="container">
    <section id="section1">
      <a href="#section2" class="scroll-link">
        Section 1
      </a> 
    </section>
    
    <section id="section2">
      <a href="#section3" class="scroll-link">
        Section 2
      </a>
    </section>
    
    <section id="section3">
      <!-- Fix the link to point to #section1 -->
        <a href="#section4" class="scroll-link">
  Section 3
        </a>
    </section>
    
       <section id="section4">
    <a href="#section1" class="scroll-link">
      Section 4
    </a>
  </section>

      
  </div>

  <script src="scripts.js"></script>
</body>
</html>