在仍使用列容器的同时使图像或容器视点出血？

Question

如何在一侧将图像或容器（用于背景色）放到视口边缘，同时仍然使用列网格作为另一侧的参考并仍将内容容纳在其中？

我附上了我想要的结果的说明。

This answer is similar，但是我需要图像尽可能多地显示，所以我不想将其扩展到不必要的程度。

我正在使用的标记类似于引导程序布局。

.container {
  margin: 0 auto;
  max-width: 1140px}
.container--fluid {
  margin: 0;
  max-width: 100%; 
}

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 2em;
}

.col--bleed {
  background: lightgray;
  /* margin-right:calc((100vw - 1140px) / 2) */
}

.col__inner {
  padding-left: 15px;
  padding-right: 15px; 
}

HTML标记：

<div class="container">
  <div class="row">
    <div class="col-7">
      <div class="col__inner">
        <!-- Content here -->
      </div>
    </div>
    <div class="col-5 col--bleed">
      <div class="col__inner">
        <!-- Content here -->
      </div>
    </div>
  </div>
</div>

Heres an example of the markup I will be using in codepen.