Текст внутри контейнера на двухцветном фоне во всю ширину на Bootstrap 4

Question

Я пытаюсь реализовать раздел из макета с Bootstrap 4, который имеет двухколоночный фон во всю ширину, 50% которого заполнено изображением. На другой половине страницы в контейнере находится текст с такими же полями, как и на остальной части веб-страницы. Вот что я пытаюсь сделать.

.salespitch {
  height: auto;
  background-color: #F6F7F9;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="salespitch">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="container">
          <div class="row">
            <div class="col-6">
            </div>
            <div class="pitchText">
              <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
              <p>Text.</p>
              <p>Moar text.</p>
            </div>
            <div class="col-6"></div>
          </div>
        </div>
      </div>
      <div class="col">
        <img class="img-fluid" src="https://via.placeholder.com/800" alt="">
      </div>
    </div>
  </div>
</section>

Answer 1

Попробуйте вот так:

.left {
  padding-left: 5rem !important; /* Or other value */
}
.right {
  padding-right: 5rem !important; /* Or other value */
}

.salespitch {
  height: auto;
  background-color: #F6F7F9;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="salespitch">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 left">
        <div class="pitchText">
          <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
          <p>Text.</p>
          <p>Moar text.</p>
        </div>
      </div>
      <div class="col-6 right">
        <img class="img-fluid" src="https://via.placeholder.com/800" alt="">
      </div>
    </div>
  </div>
</section>