Как я могу центрировать hr делителя (в начальной загрузке 4)

Question

Как я могу центрировать делитель hr? По какой-то причине он выравнивается по левому краю, несмотря на класс начальной загрузки текстового центра. Текст до и после центрируется! Вы можете увидеть это здесь: http://www.mokado.pl/index.html#about

<section class="about page-section bg-primary" id="about">
      <div class="container">
        <div class="row justify-content-left">
          <div class="text col-lg-4 text-center">
            <h2 class="text-white mt-0">Mokado</h2>
            <hr class="divider light my-4 text-center" />
            <p class="text-white mb-4">
              Ideą marki Mokado jest połączenie estetyki i komfortu... 
            </p>
            <!-- <a class="btn btn-light btn-xl js-scroll-trigger" href="#services"
              >Get Started!</a
            > -->
          </div>
        </div>
      </div>
    </section>

Answer 1

Похоже, у вас есть стиль CSS, перезаписывающий загрузочный багет.

Добавьте это в конец таблицы стилей.

Эта строка уже была там margin-top: 1.5rem !important;

Я добавил эти два.

margin-left: auto;

margin-right: auto;

.mt-4, .my-4 {
    margin-top: 1.5rem !important;
    margin-left: auto;
    margin-right: auto;
}

См. Снимок экрана.

Когда я использую код, который вы дали выше, я также вижу его по центру.

Answer 2

Добавьте этот CSS к вашему hr тегу

hr {
   margin: 0 auto;
}

или вы также можете использовать mx-auto класс, если вы не хотите писать CSS