I have a flexbox container with scrolling along the x axis. It scrolls properly, but for some reason, many items within the container are hidden to the left of the screen, outside of the display. I have no idea why and am looking to make it such that the first element in the list is the first element seen in the leftmost box of the 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;
}

The result:

The blue highlighted div is the first visible element. As you can see, the first shoe actually seen is certainly not the first element in the list, and all of the previous elements are not visible. I want the user to scroll right to the end of the list but can't get past this.