este es mi código sass y html.
Me gustaría saber por qué mis imágenes de carulsel se mueven hacia la izquierda cuando cambio el tamaño de la ventana. ¿Alguien puede ayudarme? He buscado múltiples stackoverflow pero no pude encontrar la respuesta. de alguna manera, la imagen no cambia de tamaño en consecuencia y se mueve hacia la izquierda. Me gustaría saber cómo puedo mantener la imagen en la misma posición al cambiar el tamaño de la ventana.
.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>