When I don't have enough movie covers in the line it looks terrible, for example I needed the cover of the movie "Garfield 2" to start on the left and the next ones inserted to appear on its right.
This is my source code:
.videos { width: 100%; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}.moviecover { width: 200px; height: 300px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 10px; transition: transform 0.3s ease-in-out; margin-top: 5px;}<div style="z-index:1;" class="videos"><a href="movie.php?id=1"><div style="background-image:url(https://media.themoviedb.org/t/p/w300_and_h450_bestv2/9jPHKChBVWfWxXYO1yN4FZF1U2S.jpg);" class="moviecover"></div></a><a href="movue.php?id=3"><div style="background-image:url(https://media.themoviedb.org/t/p/w220_and_h330_face/eOSb50gBb4WtbDrMU9yLGKOH9sj.jpg);" class="capafilme"></div></a> <!--- More movies here --></div>If I do it in other ways, it stops being centered and also ruins the responsiveness on different mobile devices that look great with justify-content: center. I just need it to remain center aligned with the film covers starting from left to right