Tengo un contenedor flexbox con desplazamiento a lo largo del eje x. Se desplaza correctamente, pero por alguna razón, muchos elementos dentro del contenedor están ocultos a la izquierda de la pantalla, fuera de la pantalla. No tengo idea de por qué y estoy buscando hacer que el primer elemento en la lista sea el primer elemento que se ve en el cuadro más a la izquierda del flexbox.

 .home-carousel-cards { display: flex; flex-direction: row; overflow-x: auto; flex-shrink: 0; margin: 0 -1px; justify-content: center; } .home-item-card { width: 241px; min-width: 220px; height: 300px; background: white; border-radius: 16px; cursor: pointer; margin: 0 1px; border: 1px solid black; }

El resultado:

El div resaltado en azul es el primer elemento visible. Como puede ver, el primer zapato que se ve realmente no es el primer elemento de la lista, y todos los elementos anteriores no son visibles. Quiero que el usuario se desplace hacia la derecha hasta el final de la lista, pero no puedo pasar esto.