How can I center the .thumbs_container within .thumbswrapper while displaying 5 cards (.thumbs), ensuring that they remain aligned even if only 3 are displayed on the first line?
.thumbs_wrapper {
width: 50%;
background-color: #F6F6F6;
padding: 56px 50px;
border-radius: 25px;
}
.thumbs_container {
display: flex;
flex-wrap: wrap;
gap: 30px 25px;
margin: 0 auto;
}
.thumb {
position: relative;
background-color: red;
height: 100px;
width: 100px;
border-radius: 10px;
overflow: hidden;
}<div class="thumbs_wrapper">
<div class="thumbs_container">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>