Generated by SassMeister.com.

SassMeister-input-HTML.html

<main>
  <article>
    <h2>article</h2>
    <div class="wide">
      <h2>WIDE</h2>
    </div>  
  </article>
  <aside>
    <h2>aside</h2>
  </aside>
</main>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import 'susy';

main {
  @include container(80%);
  margin-bottom: 2rem;
  margin-top: 2rem;
  outline: 1px solid;
}

article,
aside {
  background: lightblue;
  height: 16rem;
}

h2 {
  font-size: inherit;
  padding: 2rem;
}

// claim you are using split gutters
// so that Susy allows space for an extra gutter
// without it, you will get the space 
// of a single gutter between the two columns
article {
  float: left;
  width: span(8 of 12 split);
}

aside {
  float: right;
  width: span(4 of 12 split);
}

.wide {
  background: red;
  width: span(8 of 8 wide);
  // could also use width: 100% + gutter(8);
}

SassMeister-output.css

main {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-top: 2rem;
  outline: 1px solid;
}
main:after {
  content: " ";
  display: block;
  clear: both;
}

article,
aside {
  background: lightblue;
  height: 16rem;
}

h2 {
  font-size: inherit;
  padding: 2rem;
}

article {
  float: left;
  width: 65%;
}

aside {
  float: right;
  width: 31.66667%;
}

.wide {
  background: red;
  width: 102.5641%;
}

SassMeister-rendered.html

<main>
  <article>
    <h2>article</h2>
    <div class="wide">
      <h2>WIDE</h2>
    </div>  
  </article>
  <aside>
    <h2>aside</h2>
  </aside>
</main>