Подвинуть блок к середине

Question

Всем привет, не могу разобраться с flex-box, подскажите в чем допускаю ошибку? Приложила скрин как выглядит у меня, необходимо чтобы первый и третий блоки(квадраты) были посередине (то есть квадрат слева прижат к середине ). Здесь отображает по другому по этому прикладываю скрин

.work_border {
  height: 232px;
  width: 232px;
  border: 0px solid rgba(50, 65, 88, 1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  box-shadow: 0px -5px 24px 0px rgba(153, 153, 151, 0.15)
}

.work_tittle span {
  font-size: 55px;
  line-height: 77px;
  letter-spacing: 16px;
  color: #2237f2;
  font-weight: 600;
}

.work_tittle h4 {
  font-size: 35px;
  line-height: 49px;
  color: #07081f;
  letter-spacing: 10px;
  font-weight: 600;
}

.work_main_block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.work_main_block_2 {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

.work_main_block_3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.btn1 {
  border: 4px solid #00c8dc;
  background-color: #ffffff;
  color: #00c8dc;
  font-weight: 700;
  width: 238px;
  height: 47px;
}

<section id="work">
  <div class="container">
    <div class="work_tittle text-center">
      <h4> HOW IT <br>
        <span> WORKS?</span></h4>
    </div>
    <div class="work__main d-flex flex-column">
      <div class="work_main_block">
        <div class="col-sm work_number_block">
          <div class="work_border">

          </div>

        </div>

        <div class="col-sm work_content_block">
          <div class="work_content_header">
            <h5> COMPLETE REGISTRATION</h5>
          </div>

          <div class="work_text_block">
            <p> TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
            </p>
          </div>
        </div>
      </div>

      <div class="work_main_block_2">
        <div class="col-sm work_number_block">
          <div class="work_border">

          </div>

        </div>

        <div class="col-sm work_content_block">
          <div class="work_content_header">
            <h5> COMPLETE REGISTRATION</h5>
          </div>

          <div class="work_text_block">
            <p> TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
            </p>
          </div>
        </div>
      </div>


      <div class="work_main_block_3">
        <div class="col-sm work_number_block">
          <div class="work_border">

          </div>

        </div>

        <div class="col-sm work_content_block">
          <div class="work_content_header">
            <h5> COMPLETE REGISTRATION</h5>
          </div>

          <div class="work_text_block">
            <p> TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="work_button_block text-center ">
      <button type="button" class="btn1">REGISTER NOW</button>
    </div>

  </div>
</section>

Answer 1

Нужны всего две правки в вашем стиле:

.work_number_block {
  text-align: center;
}

.work_border {
  ...
  display: inline-block;
}

БЛОГ НА HUSL

Подвинуть блок к середине

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