Как я могу выровнять контент в div с контентом вне его в начальной загрузке?

Question

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

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

Вот результат, который я получаю:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<section id="">
  <div class="d-flex align-items-center bg-primary" style="min-height: 450px">
    <div class="container">
      <h1 class="">TITLE TEXT</h1>
    </div>
  </div>
</section>

<section id="">
  <div class="subhead bg-primary">
    <div class="row">
      <div class="col-sm bg-secondary" style="min-height: 400px">
        <div class="container">
          <h3>TITLE</h3>
        </div>
      </div>
      <div class="col-sm bg-warning" style="min-height: 400px"></div>
    </div>
  </div>
</section>

И HTML, с которым я в данный момент застрял (CSS был добавлен в HTML для тестирования)

Спасибо за любую предоставленную помощь, и еслиВам нужно что-нибудь еще, пожалуйста, просто скажите мне.

Answer 1

.text-to-center{ display:flex}
h1,h3{ margin:auto;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
  <div class="row bg-primary" style="min-height: 450px">
    <div class="col-12 d-flex align-items-center">
      <div class="container text-to-center">
      
        <h1 class="text-center">TITLE TEXT</h1>
      </div>
    </div>
  </div>
</section>
<section id="">
  <div class="subhead bg-primary">
    <div class="row" style="min-height: 400px">
      <div class="col-6 d-flex align-items-center bg-secondary">
        <div class="container text-to-center">
        <h3 class="text-center">TITLE</h3>
      </div>
    </div>
    <div class="col-6 bg-warning"></div>
    </div>
  </div>
</section>

Answer 2

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
  <div class="row bg-primary" style="min-height: 450px">
    <div class="col-6 d-flex align-items-center">
      <div class="container">
        <h1 class="text-center">TITLE TEXT</h1>
      </div>
    </div>
  </div>
</section>
<section id="">
  <div class="subhead bg-primary">
    <div class="row" style="min-height: 400px">
      <div class="col-6 d-flex align-items-center bg-secondary">
        <div class="container">
        <h3 class="text-center">TITLE</h3>
      </div>
    </div>
    <div class="col-6 bg-warning"></div>
    </div>
  </div>
</section>