Почему изображения карты не выравниваются должным образом

Question

Как выровнять изображения в соответствующем столбце. Я использовал свойства flex, но если я добавлю 6 карт, выравнивание будет отсутствовать. Пожалуйста, помогите мне. HTML код:

<div className="contentCard">
<div className="card">
<div className="cardimage">
<img className="img" src="../../static/download.jpg" alt="Logo" />
</div>
<div className="cardtext">Entertainment
<div className="cardSectext">collect post-event feedback from concerts,trade show</div>
</div>
</div>
</div>

Вот код CSS:

.contentCard{
display:flex;
width: 100%;
height: auto;
flex-direction:row;
flex-wrap:wrap;
margin-right:40px;
justify-content:space-around;
.card{
width:18.50%;
height: 190px;
margin:20px;
border: 1px solid rgba(0, 0, 0, 0.07); 
border-radius: 15px 15px 15px 15px;
.cardimage{
width:100%;
height:65%;
object-fit: cover;
}
.img{
height: 100%;
width: 100%;
}
.cardtext{
margin-left: 10px;
font-family:Avenir-Roman; 
}
.cardSectext{
height: 10%;
font-size:14px;
color:grey;
}}}

Изображение

Answer 1

это из-за justify-content: space-around, когда flex переносится из одной строки в столбец, он по-прежнему использует space-around, но если вы хотите выровнять по горизонтали по центру, тогда вы должны использовать justify-content: center, просто используйте медиазапрос, чтобы изменить это, когда экран размер изменен