Сдвигаются элементы в блоках

Question

Всём привет, взял тестовый макет для вёрстки,

сделал 2 блока, пока занимаюсь только первым, в первом создаю ещё 3 блока с этапами в нём градиентовый круг и соответственно текст. Изначально ставил круги, но когда ввожу текст всё сдвигается просто в небеса, сейчас сделал отдельно по 3 блока, всё равно не могу поставить их ровно в block, помогите, пожалуйста, каким методом это реализуется.

https://prnt.sc/10d01ad вот так получается, цветным выделял блоки.

.block {
  height: 36%;
  width: 100%;
  background-color: green;
  padding-top: 50px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
}

<div class="block">
  <div class="etap1">
    <div class="circle1"></div>
  </div>

  <div class="etap2">
    <div class="circle2"></div>
  </div>

  <div class="etap3">
    <div class="circle3"></div>
  </div>

</div>
<div class="block1">

</div>

Answer 1

body {
 background-color:#000;
}
.block{
 display:flex;
 flex-wrap:wrap;
 max-width:1300px;
 justify-content:space-between;
 margin:auto
}
.circle{
 background-color:#fff;
 width:150px;
 height:150px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:800;
 margin:25px;
}

<div class="block">
 <div class="etap1 circle">
  Этап 1
 </div>
 <div class="etap2 circle">
  Этап 2
 </div>
 <div class="etap3 circle">
  Этап 3
 </div>
 <div class="etap4 circle">
  Этап 4
 </div>
 <div class="etap5 circle">
  Этап 5
 </div>
 <div class="etap6 circle">
  Этап 6
 </div>
</div>

Если содержимое в круге может выходить за его границы, то самому кругу стоит сделать position:relative, а родительскому блоку внутри position:absolute

БЛОГ НА HUSL

Сдвигаются элементы в блоках

Ответы (1 шт):