Why Images card are not aligning properly

Question

How to align images in proper column. I have used flex properties but If I add 6 cards then alignment is missing. Please help me. HTML code:

<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>

Here it is the CSS code:

.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;
}}}

Image

Answer 1

it's because of justify-content: space-around , when flex is wrapped from one row to column it still use space-around but if you want align horizontally in center then you have to use justify-content: center just use media query to change that when screen size changed