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