встал на одной проблеме, вроде бы не такая сложная, но не могу найти вариант решения.
На странице есть карточки товара 4 карточки на 1 строке при ширине в 1600px, первая и крайняя карточки должны быть без боковых отступов. попробовал использовть display:flex и justify-content space-between. Но при добавление карточек товара (допустим в сумме будет 6 карточек(4-первая строка, 2-вторая строка)). Из-за space between карточки стоят не ровно.
<div className="projects">
<h1>Проекты</h1>
<div className="projects-container">
<div className="card">
<p>Название проекта</p>
<span>Подробнее →</span>
</div>
<div className="card">
<p>Название проекта</p>
<span>Подробнее →</span>
</div>
<div className="card">
<p>Название проекта</p>
<span>Подробнее →</span>
</div>
<div className="card">
<p>Название проекта</p>
<span>Подробнее →</span>
</div>
<div className="card">
<p>Название проекта</p>
<span>Подробнее →</span>
</div>
<div className="card">
<p>Название проекта</p>
<span>Подробнее →</span>
</div>
</div>
<span>Все проекты →</span>
</div>
CSS code:
.projects-container {
display: flex;
width: 100%;
justify-content: space-between;
flex-flow: wrap;
.card {
width: 360px;
height: 675px;
background-color: bisque;
margin-top: 30px;
p{
color:#FFF;
font-size: 24px;
}
span{
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
}
}
}