Bootstrap изображение и цвет фона вне контейнера

Question

У меня есть веб-сайт с контейнером Bootstrap. Проблема здесь в том, что цвет фона и изображение полноразмерные. С контейнером для жидкости. Важно то, что содержимое, которое находится в контейнере, всегда выравнивается по цвету фона и изображению.

Пример оформления

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

.left {
  background: red;
}
.left:before {
	content: "";
	display: block;
	background: inherit;
	width: 100vw;
	height: 100%;
	position: absolute;
	left: -100vw;
}
.right {
  background: url('https://upload.wikimedia.org/wikipedia/commons/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg');
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <div class="col-md-8 left">
      <p>
        Banner information here
      </p>
    </div>
    <div class="col-md-4 right">
      <p>
        The text should always align with the left side of the image. On all screens.<br /><br />
        But the images needs to be full width, just like the red background color wich is outside the container with the : before tag.
      </p>    
    </div>  
  </div>
</div>

Визуальный пример JSFiddle