How do I stop overflow on my webpage when using AOS library

Question

I added AOS library on this project sushi007.netlify.app and now I have an overflow... How do I stop it the page from overflow?

I tried adding overflow hidden on all the sections. It worked but the layout shifted only when I zoom out my browser it looks okay

      <section class="newsletter section">
      <div class="newsletter__container container">
      <div
        class="newsletter__content grid"
        data-aos="zoom-in-right"
        data-aos-easing="linear"
        data-aos-duration="1000"
      >
        <img
          src="./assets/img/newsletter-sushi.png"
          alt="newsletter image"
          width="625"
          height="542"
          loading="lazy"
          class="newsletter__banner"
        />

        <div class="newsletter__data">
          <span class="section__subtitle">Newsletter</span>

          <h2 class="section__title">
            Subscribe For <br />
            Offer Updates
          </h2>

          <form action="" class="newsletter__form">
            <input
              type="email"
              id="email"
              name="email"
              placeholder="Enter Email"
              class="newsletter__input"
            />

            <button class="button newsletter__button">
              Subscribe <i class="ri-send-plane-line"></i>
            </button>
          </form>
        </div>
      </div>

      <img
        src="./assets/img/spinach-leaf.png"
        alt="newsletter image"
        width="200"
        height="399"
        loading="lazy"
        class="newsletter__spinach"
      />
    </div>
  </section>