Boostrap 4 ряда исправить горизонтальный поток

Question

У меня есть проблема, когда при создании строки в правой части страницы появляется пробел. Мне было интересно, почему это происходит и как я могу это убрать. Я пробовал несколько вещей, но безуспешно.

.special-header {
  margin-top: 50px;
}

.special-h1 {
  font-size: 40px;
  font-weight: 700;
  font-style: normal;
  color: #6BC8F2;
  line-height: 49px;
}

.special-row {
  margin-top: 120px;
}

.special-h2 {
  text-align: center;
}

.special-block {
  border: 2px solid #6BC8F2;
  margin-left: 160px;
  margin-right: 160px;
  border-radius: 5px;
  padding: 30px;
}

.special-icon {
  float: right;
}

.special-i {
  font-size: 39px;
  color: #6BC8F2;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<article class="special-header">
  <div class="text-center container">
    <h1 class="special-h1">Onze specialiteiten</h1>
  </div>
  <div class="special-row row d-flex justify-content-center">
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
  </div>
</article>

Ниже я разместил свои HTML и css и изображение того, как оно выглядит в настоящее время!

Answer 1

оберните свой первый ряд с div с контейнером или классом контейнера-жидкости