Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="col">
  <div>
    <p class=wide>too much padding</p>
    <p>hello there</p>
  </div>
</div>

SassMeister-input.scss

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

@import "susy";
* {
  box-sizing: border-box;
}
$susy: (
  columns: 12,
  column-width: 80px,
  gutters: 20px/80px,
  gutter-position: inside-static,
);

.col {
  background: #eee;
  background-clip: content-box;
  @include span(4 of 12);
  > div {
    padding: 0 gutter();
  }
  .wide {
    background: yellow;
    margin: 0;
    @include bleed-x();
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.col {
  background: #eee;
  background-clip: content-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.33333%;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}
.col > div {
  padding: 0 10px;
}
.col .wide {
  background: yellow;
  margin: 0;
  margin-right: -10px;
  margin-left: -10px;
  padding-right: 20px;
  padding-left: 20px;
}

SassMeister-rendered.html

<div class="col">
  <div>
    <p class=wide>too much padding</p>
    <p>hello there</p>
  </div>
</div>