Hello I have a problem I am trying to make my page RWD but the problem is it creates overflow_x when sections are loaded by interSectionObserver, and it causes that positioning on page dies but when it reaches end of the page, everything is fixed. More code can be found on my github but I am not sure do I have permission to paste it.

CSS

.section {
   transition: opacity 1s, transform 1s;
}
.hidden-section {
    opacity: 0;
    transform: translateY(7rem);
}

JS:

        
        _revealSection() {
                const sections = document.querySelectorAll('.section');
                const options = {
                    root: null,
                    threshold: 0.15,
                    rootMargin: "0px",
                }
        
                const showSection = ((entries, observer) => {
                    const [entry] = entries;
                    if (!entry.isIntersecting) return 
                    entry.target.classList.toggle('hidden-section')
                    observer.unobserve(entry.target)
                    
                })
        
                const sectionFadeIn = new IntersectionObserver(showSection, options);
        
                sections.forEach(sec => {
                    sec.classList.add('hidden-section')
                    sectionFadeIn.observe(sec)
                } )
            }

HTML:

    <section class="section" id="section--5">
                <div class="contact">
                    <h1 class="contact__header">Are you ready for an new experience?</h1>
                    <button class=" modal-button contact__button" data-but="4">contact us</button>
                </div>