HTML
<section>
<h2 class="title">Тарифные пакеты</h2>
<p class="desc">Лучшее решение для игр - акционные пакеты!</p>
<div class="card">
<div class="card_item">
<div class="card_cover">
<img class="card_img" src="1.jpg" alt="Baza">
</div>
<div class="card_info">
<div class="">
<p class="card_title">Тариф "База"</p>
<p class="card_desc">Подходит для игроков с менее боевым настроем играть!</p>
</div>
<p class="card_bid"><span class="card_price">700 ₽/сут</span></p>
</div>
</div>
</div>
<div class="card">
<div class="card_item">
<div class="card_cover">
<img class="card_img" src="1.jpg" alt="Baza">
</div>
<div class="card_info">
<div class="">
<p class="card_title">Тариф "База"</p>
<p class="card_desc">Подходит для игроков с менее боевым настроем играть!</p>
</div>
<p class="card_bid"><span class="card_price">700 ₽/сут</span></p>
</div>
</div>
</div>
<div class="card">
<div class="card_item">
<div class="card_cover">
<img class="card_img" src="1.jpg" alt="Baza">
</div>
<div class="card_info">
<div class="">
<p class="card_title">Тариф "База"</p>
<p class="card_desc">Подходит для игроков с менее боевым настроем играть!</p>
</div>
<p class="card_bid"><span class="card_price">700 ₽/сут</span></p>
</div>
</div>
</div>
</section>
CSS
.card{
display: flex;
justify-content: space-between;
}
.card_item{
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0pz 5px 4px rgba(0, 0, 0, 0.25);
padding: 26px;
gap: 15px;
flex-basis: 32%;
box-sizing: border-box;
}
.card_cover{
position: relative;
overflow: hidden;
width: 100%;
height: 380px;
}
.card_img{
width: 100%;
height: 380px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
space-between не распределяет колонки по центру, не пойму в чем косяк
