Page unexpectedly snaps back to start of container

Question

I am making a personal website and cannot get the scroll-snap to work as I wish. Can you please take a look at my site and inspect the html and css files to help identify what's wrong with my code? (I can't replicate it in codepen or jfiddle).

That landing page has an outer container #mainpage-container and two main sections, #landing and #about.
Landing is set to height: 100vh while about doesn't have a set height.
I simply want a mandatory snap to about when scrolled down from landing, and snap back to landing when scrolled up from about.

The problem is when scrolled down to the end of about, it snaps back to start of about. There shouldn't be any snapping when scrolling within about.

As you can see, I have the following css related to snapping

#mainpage-container {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    height: 100vh;
    position: relative;
}

#landing {
    scroll-snap-align: start;
    width: 100vw;
    height: 100vh;
}

#about {
    scroll-snap-align: start;
  }