Как центрировать боксы с помощью Flexbox?

Question

Я создаю локальную веб-страницу, но столкнулся с некоторыми проблемами - я пытаюсь центрировать свои ящики, но ничего из того, что я пробовал, не работает.У меня есть 2 раздела - первый слегка выровнен по правому краю, а второй слегка смещен по левому краю (вставил только код первого раздела).

Я попытался использовать поле: auto и многие другие, которые я не помню, поскольку я пытался решить эту проблему в течение некоторого времени.

<div class="main-container">
  <div class="services">
    <div class="heading">
      <h2>Services</h2>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-expand-arrows-alt"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-smile"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-comments"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-user"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-gift"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
  </div>
</div>

.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 420px;
  border-top: 5px solid hsla(134, 97%, 14%);
  flex-wrap: wrap;
  }

/* Box titles */

.heading {
  display: inline;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  position: relative;
  color: hsl(134, 97%, 14%);
  float: left;
  top: 20px;
  left: 150px;
}

.box {
  display: block;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  height: 200px;
  width: 190px;
  border: 3px solid hsl(356, 97%, 29%);
  margin: 75px  40px;
  padding: 15px 15px;
  border-radius: 10px;
  color: hsl(134, 97%, 14%);
}

.box h3, .box p {
  text-align: center;
  margin-top: 10px;
}

.service-icon {
  text-align: center;
}

.service-icon i {
  font-size: 30px; line-height: normal;
}

Answer 1

Заголовок div является дочерним для div class="services", который "зацикливает" все дочерние элементы.

Я немного отрегулировал разметку.Убрал заголовок из служб div и также удалил свойство float.

Наконец я вместо этого присвоил границу классу .main-container.

Решило ли это вашу проблему?:)

.main-container {
   border-top: 5px solid hsla(134, 97%, 14%);
}

.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 420px;
 
  flex-wrap: wrap;
  }

/* Box titles */

.heading {
  display: inline;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  position: relative;
  color: hsl(134, 97%, 14%);
  top: 20px;
  left: 150px;
}

.box {
  display: block;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  height: 200px;
  width: 190px;
  border: 3px solid hsl(356, 97%, 29%);
  margin: 75px  40px;
  padding: 15px 15px;
  border-radius: 10px;
  color: hsl(134, 97%, 14%);
}

.box h3, .box p {
  text-align: center;
  margin-top: 10px;
}

.service-icon {
  text-align: center;
}

.service-icon i {
  font-size: 30px; line-height: normal;
}

<div class="main-container">
   <div class="heading">
      <h2>Services</h2>
    </div>
  <div class="services">
    
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-expand-arrows-alt"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-smile"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-comments"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-user"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-gift"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
  </div>
</div>

Пример JSFiddle