使用显示时，图像在恢复窗口时移动

Question

这是我的SASS和HTML代码。

我想知道为什么我的Caroulsel图像在调整窗户大小时向左移动，有人可以帮我吗？我搜索了多个stackoverflow，但找不到答案。 以某种方式，图像不会稳定地调整大小并向左移动。我想知道，在重新分配窗口时，如何将图像保持在相同的位置。

.carousel-wrapper {
  position: relative;
  // margin: auto;
  border: 4px solid red;
  overflow: hidden;
  //ul
  .facebook_album_list {
    display: flex;
    .album_list_item {
      min-width: 100%;
      a {
        img {
          width: 100%;
          aspect-ratio: 16/9;
          max-height: 300px;
        }
      }
    }
  }
  .carousel_button {
    position: absolute;
    z-index: 2;
    height: 100%;
    cursor: pointer;
    display: grid;
    justify-content: center;
    align-items: center;
    color: rgb(255, 255, 255);
    &:hover {
      .fa-solid {
        transform: scale(1.2);
      }
    }
    .fa-solid {
      font-size: 1rem;
      padding: 1rem;
      border-radius: 50%;
      transform: scale(1);
      background-color: rgb(212, 88, 0);
    }
  }
  #previousbtn {
    left: 0;
  }
  #nextbtn {
    right: 0;
  }
}

<div class="carousel-wrapper" aria-label="Photo gallery" data-carousel>
  <ul class="facebook_album_list album_list" data-carousel-list>

    <li class="album_list_item slide_item" data-carousel-list-item>
      <a href="">
        <img class="album_list_item_img" data-carousel-img src="" loading="lazy">
      </a>
    </li>

    <li class="album_list_item slide_item" data-carousel-list-item>
      <a href="">
        <img class="album_list_item_img" data-carousel-img src="" loading="lazy">
      </a>
    </li>

    <li class="album_list_item slide_item" data-carousel-list-item>
      <a href="">
        <img class="album_list_item_img" data-carousel-img src="" loading="lazy">
      </a>
    </li>

  </ul>
</div>