在容器上扩展元素，但将文本内容保留在容器内

Question

这是我第二次遇到此问题。 我下面有一个这样的设计，该网站的主容器为1280px，但是设计必须始终为全宽。

HTML的当前结构为：

<div class="main-container">
<div class="row">
   <div class="col-3">
     Whaat we do
   </div>
  <div class="col-9">
    <div class="row">
      <div class="col-6">
        Reaserch
      </div>
      <div class="col-6">
        Design
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        Market
      </div>
      <div class="col-6">
        Managment
      </div>
    </div>
  </div>
</div><!-- end of row -->
</div><!-- end of main-container 1280px-->

但是您可能会看到这种结构，左栏中的照片也将被限制为1280像素，但应缩小到边缘。 （下面的屏幕截图）。

如何为这种设计构建正确的结构，以及如何在CSS中进行管理？