Full-width CSS offset columns

Question

I'm looking at ways to re-create the grid below:

The idea being we have a full width, two column layout which add up to the browser width. Column one being 2/3 and column two being 1/3. Then we have a container within each that add up to the content width.

However the obvious way of achieving this doesn't seem to be working as i'd like. If the containing columns were equal (50% width) then it would work fine. But because the parent columns are offset I can't get it work, the columns go to the right of center. I get the result below:

I've set up a pen here to show the results in code with the two column layout to show context: http://codepen.io/abbasinho/pen/XmxOjL code below:

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);
}

It would be great if anybody could help me with this problem. I'm willing to consider all solutions, including ones that include a bit of Javascript.