На первом скриншоте показано, что шаги выстроены не по центру странички. Как это исправить? Пытался писать margin 0 auto, align-items, text-align, не получается.
@media(max-width: 768px) {
.steps {
width: 768px;
height: 606px;
.container-navigation__step {
display: flex;
flex-wrap: wrap;
.navigation__step {
width: 200px;
}
}
}
}
<div class="steps">
<h2 class="steps-header">КАК ЗАБРАТЬ ПИТОМЦА ДОМОЙ?</h2>
<div class="container-navigation__step">
<div class="navigation__step">
<div class="left-part">
<h3 class="step-number">1</h3>
<div class="line"></div>
</div>
<div class="text">
<h4 class="what-to-do__step">Выберите питомца</h4>
<p class="text-step">В нашем приюте содержится более 60 собак</p>
</div>
</div>
<div class="navigation__step">
<div class="left-part">
<h3 class="step-number">2</h3>
<div class="line"></div>
</div>
<div class="text">
<h4 class="what-to-do__step">Оставьте
заявку</h4>
<p class="text-step">Через сайт или связавшись с нами любым удобным для вас способом</p>
</div>
</div>
<div class="navigation__step">
<div class="left-part">
<h3 class="step-number">3</h3>
<div class="line"></div>
</div>
<div class="text">
<h4 class="what-to-do__step">Пройдите
собеседование</h4>
<p class="text-step">Мы заботимся о наших питомцах и отдаем их только в хорошие руки</p>
</div>
</div>
<div class="navigation__step">
<div class="left-part">
<h3 class="step-number">4</h3>
<div class="line"></div>
</div>
<div class="text">
<h4 class="what-to-do__step">Познакомьтесь
с собакой</h4>
<p class="text-step">Приезжайте к нам в приют, что бы в живую увидеть вашего питомца</p>
</div>
</div>
<div class="navigation__step">
<div class="left-part">
<h3 class="step-number num5">5</h3>
<div class="line line5"></div>
</div>
<div class="text">
<h4 class="what-to-do__step">Забирайте
друга домой</h4>
<p class="text-step">Мы поможем вам с транспортировкой</p>
</div>
</div>
</div>
<button class="button-step step-take">
<p class="text-button__step">ВЗЯТЬ ПИТОМЦА</p>
</button>
</div>