Попытка центрировать гибкую секцию в bootstrap 4

Я только начинаю изучать HTML и CSS с помощью Bootstrap 4 и столкнулся с проблемой.

Я пытаюсь центрировать раздел CTA, который использует функцию гибкости для размещения столбцов. Каким-то образом, несмотря на долгие исследования, мне не удалось найти способ центрировать его, поскольку он всегда кажется немного правее или левее.

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

Вот как это выглядит сейчас с этим HTML:

<div class = "container">
    <div class = "row">
        <a href = "#"><div class = "cf col-4 d-flex justify-content-center">
            <img class = "cta bottom" src = "img/home/dev-more.png" class = "rounded">
            <img class = "cta top" src = "img/home/development.png" class = "rounded"></a>
        </div>
        <a href = "#"><div class = "cf col-4  d-flex justify-content-center">
            <img class = "cta bottom" src = "img/home/dev-more.png" class = "rounded">
            <img class = "cta top" src = "img/home/development.png" class = "rounded"></a>
        </div>
        <a href = "#"><div class = "cf col-4  d-flex justify-content-center">
            <img class = "cta bottom" src = "img/home/dev-more.png" class = "rounded">
            <img class = "cta top" src = "img/home/development.png" class = "rounded"></a>
        </div>
    </div>
</div>

И этот CSS:

    .cta {
    margin: 0;
    padding: 0;
}

img.cta {
  opacity:100; background:white;
  -o-transition:opacity .2s ease-out;
  -ms-transition:opacity .2s ease-out;
  -moz-transition:opacity .2s ease-out;
  -webkit-transition:opacity .2s ease-out;
  /* ...and now override with proper CSS property */
  transition:opacity .2s ease-out;
}

img.cta:hover { opacity:0;} 

.cf {
    margin: 0;
    padding: 0;

}

.cf img {
  position:absolute;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;

}

.cf img.top:hover {
  opacity:0;
}

.cta-text {

}