Html 水平卷轴的内容保持堆叠

(注:我正在做一项判断，这就是为什么它是针对一件预先存在的东西的.)

I have a horizontal media scroller which works however the contents keeps overlapping and I'm not sure why. I have to only use CSS and HTML too. I'm very new to this still so would really appreciate any help! Thankyou!个

Html部分

<section>
    <h1 class=heading>Starring</h1>
    <div class="media-scroller">
      <div class="media-element">
        <img src="https://m.media-amazon.com/images/M/MV5BNjM5OTE1MjA3Nl5BMl5BanBnXkFtZTgwOTAxNjk4MDE@._V1_.jpg" alt="Tobin Bell" height="400px">
        <p>Tobin Bell</p>
      </div>
      <div class="media-element">
        <img src="https://scontent.fhlz4-1.fna.fbcdn.net/v/t1.6435-9/165941505_293315678847053_9188874086571008155_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=be3454&_nc_ohc=_CZiCziE2joAX-cUwyC&_nc_ht=scontent.fhlz4-1.fna&oh=00_AfAG7qwps8OiPXvCRF4sVYEwdgWNK8cIN_o_c_n9IyghxQ&oe=659FAD8E" alt="Shawnee Smith" height="400px">
        <p>Shawnee Smith</p>
      </div>
      <div class="media-element">
        <img src="https://m.media-amazon.com/images/M/MV5BOGQ5ZTI2OGYtZGZjNC00ZDg2LWE4MGItYTk4YTY2OGRiYTU2XkEyXkFqcGdeQXVyMjQwMDg0Ng@@._V1_.jpg" height="400px">
        <p>Synnøve Macody Lund</p>
      </div>
      <div class="media-element">
        <img src="https://www.gateworld.net/wp-content/uploads/2017/06/beach01.jpg" alt="Michael Beach" height="400px">
        <p>Michael Beach</p>
      </div>
      <div class="media-element">
        <img src="https://latw.org/sites/default/files/styles/artist_profile_l/public/Brand%2C%20Steven%202016%20Amadeus.jpg?itok=Mc-VVfFM" alt="Steven Brand" height="400px">
        <p>Steven Brand</p>
      </div>
      <div class="media-element">
        <img src="https://m.media-amazon.com/images/M/MV5BZTM0NDY1ZjctNjFkMC00OTExLTgwNjAtYjE1M2NjNjYwNTQ2XkEyXkFqcGdeQXVyMjQwMDg0Ng@@._V1_.jpg" alt="Renata Vaca" height="400px">
        <p>Renata Vaca</p>
      </div>
    </div>
  </section>

CSS部分

.media-scroller {
  display: grid;
  gap: 30px;
  grid-auto-flow: column;
  grid-auto-columns: 20%;
   
  padding: 30px;

  overflow-x: auto;
  overscroll-behaviour-inline: contain;
}

.media-element {
  display:grid;
  grid-template-rows: min-content;
  gap: 4px;
  padding: 20px;
  background-color: #343434;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 #851111,0 6px 18px 0 #B71717;
  min-width: 260px;
}

.media-element > img {
  inline: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
}

Image of the issue个

我try 了限制html元素和css部分的大小，try 了长宽比和百分比，而不是px.我也在css中的所有实例中使用填充，但没有运气.