全宽CSS偏移列

Question

我正在寻找重新创建网格的方法：

我们的想法是我们有一个全宽，两列的布局，它们与浏览器的宽度相加。第一列是2/3，第二列是1/3。然后我们在每个容器中都有一个容器，它加起来就是内容宽度。

然而，实现这一目标的显而易见的方式似乎并不像我想的那样有效。如果包含的列相等（50％宽度），那么它将正常工作。但由于父列是偏移的，我无法使其工作，列位于中心的右侧。我得到以下结果：

我在这里设置了一支笔，用两列的布局显示结果，以显示上下文：http://codepen.io/abbasinho/pen/XmxOjL代码如下：

HTML：

<div class="outer">
  <div class="alt-column-1">
    <div class="alt-column-1-inner">
      Column 1
    </div>
  </div>
  <div class="alt-column-2">
    <div class="alt-column-2-inner">
      Column 2
    </div>
  </div>
</div>

CSS（SCSS）：

$max-width: 1200px;

.outer {
  overflow: hidden;
  margin: 0 0 2rem;
}

.alt-column-1,
.alt-column-2 {
  height: 20rem;
  float: left;
}

.alt-column-1 {
  width: 66.666%;
  background: red;
}

.alt-column-2 {
  width: 33.333%;
  background: blue;
}

.alt-column-1-inner {
  max-width: ($max-width/3) * 2;
  width: 100%;
  height: 100%;
  float: right;
  color: white;
  background: rgba(0,0,0,0.5);
}

.alt-column-2-inner {
  max-width: $max-width/3;
  width: 100%;
  height: 100%;
  float: left;
  color: white;
  background: rgba(0,0,0,0.5);
}

如果有人能帮助我解决这个问题，那就太棒了。我愿意考虑所有解决方案，包括那些包含一些Javascript的解决方案。