Javascript CSS-AOS动画库-为什么动画中的幻灯片会分散我整个页面的宽度？

我正在使用AOS库制作动画。当我使用动画左滑和右滑时，页面的宽度比正文的宽度更宽，使整个页面看起来很奇怪。我在网上找不到任何解决方案，我找到的唯一解决方案是，如果我给我在px宽度上应用动画的元素（无论出于何种原因，它不能大于400px）。然而，这个解决方案并没有真正起作用，因为它也破坏了我的css。我提供了一把js小提琴，这样你就能明白我的意思了。我花了好几个小时在这上面，所以如果有人能帮忙，我真的很高兴！谢谢

代码：

---

虽然我不完全确定为什么会这样（我经常遇到同样的问题），但有另一种方法可以解决这个问题

只需在父元素上设置

overflow-x:hidden

---

在您的情况下，这将是

.container fluid

非常感谢！！！我花了几个小时试图弄清楚，实际上也尝试了其他库，结果发现只要动画是滑入和滚动的，任何库的宽度都会出现问题，但是将overflow-x设置为hidden works完美！！！谢谢

<div style="background-color:red; height:300px;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="container-fluid">
  <div class="row center-block wrapper">
    <div class="col-sm-6 test" data-aos="slide-right">
      <h2 class="text-center">title</h2>
      <p class="text-center">app</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
      </div>
    </div>
    <div class="col-sm-6 test2" data-aos="slide-left">
      <h2 class="text-center">title</h2>
      <p class="text-center">appp</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">

      </div>
    </div>
    <div class="col-sm-6 test" data-aos="slide-right">
      <h2 class="text-center">title</h2>
      <p class="text-center">app</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
      </div>
    </div>
    <div class="col-sm-6 test2" data-aos="slide-left">
      <h2 class="text-center">title</h2>
      <p class="text-center">appp</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">

      </div>
    </div>
  </div>
</div>

.test{
  width: 400px;
}

.test2{
  width: 400px;
}