使用GSAP实现横向滚动时页面底部出现额外空白的问题求助

我现在正在做一个网站，想用GSAP实现横向滚动效果，主要针对#home和#features这两个区域——所以我用布局把它们并排摆放，让整体内容超出视口宽度。但现在遇到了一个超头疼的问题：页面底部出现了莫名其妙的空白区域，感觉宽度确实是我想要的3倍视口宽，但高度也跟着“被放大”了3倍，这真的太烦人了！

我已经用浏览器的检查工具反复排查过，但完全找不到是哪个元素导致了这个空白。明明把相关区域的高度设成了100dvh，可空白区域居然出现在100dvh的范围之外。下面是我的相关代码，希望有人能帮我找出问题根源，把这个恼人的空白去掉：

相关CSS代码 #

.section-wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  width: 300vw; 
} 
section { 
  padding: 0 164px; 
} 
#home, #features { 
  height: 100%; 
  flex: 0 0 100vw; 
} 
#home-section { 
  padding-top: 112px; 
  height: calc(100% - 112px); 
  position: relative; 
} 
.hero-home-wrapper { 
  display: flex; 
  flex-direction: column; 
  gap: 42px; 
}

相关HTML结构 #

<div class="section-wrapper"> 
  <div id="home"> 
    <section id="home-section"> 
      <img src="../assets/images/lock.png" alt="lock" class="lock-image" data-animate="float"> 
      <div class="hero-home-wrapper"> 
        <h1 class="text-montserrat">A New Era of Cyber Defense <br class="br-desktop">for a Safer and Smarter<br class="br-desktop"> Digital Future.</h1> 
        <h4 class="text-inter"> Defendora is a smart cybersecurity solution that<br> keeps your applications and data safe with real-<br>time protection anytime, anywhere. </h4> 
        <div class="get-protected text-inter"> 
          <h3>Get Protected</h3> 
          <a href="" class="try-free-button">Try free</a> 
        </div> 
      </div> 
      <span class="text-inter span-home">Protecting over 100,000 computers — Globally.</span> 
    </section> 
  </div> 
  <div id="features"> 
    <section id="home-section"> 
      /// same as home-section... 
    </section> 
  </div> 
</div>

内容来源于stack exchange