Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container-broken">
  <div class="hero">
    <div class="right-arrow"></div>  
    <div class="left-arrow"></div>
  </div>
</div>

<div class="description">The blue boxes should overlap the black borders by -10/10px:</div>

<div class="container">
  <div class="hero">
    <div class="right-arrow"></div>  
    <div class="left-arrow"></div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.4.0)
// ----

@import "singularitygs";
@import "compass";
@import "breakpoint";

@mixin clearfix {
  &:after {
    display: table;
    content: '';
  }
}

.container-broken {  //Container for the grid system 
    margin: 0 auto;
    background: green;
    position: relative;
    @include clearfix;
    border-left: 20px solid #000;
    border-right: 20px solid #000; 
    width: 980px;
}

.container {  //Container for the grid system 
    margin: 0 auto;
    background: green;
    position: relative;
    border-left: 20px solid #000;
    border-right: 20px solid #000; 
    width: 980px; 
}

.hero {
  background: red;
  height: 200px;
  @include clearfix;
}

.left-arrow, .right-arrow {
            position: absolute;
            cursor: pointer;
            background: blue;
            margin-top: -20px;
            font-size: 0.8em;
            width: 41px;
            height: 41px;
            top: 50%;
        }
        .left-arrow {
            left: -10px;
        }
        .right-arrow {
            right: -10px;
        }
        
.description {
  text-align: center;
  padding: 30px;
}

SassMeister-output.css

.container-broken {
  margin: 0 auto;
  background: green;
  position: relative;
  border-left: 20px solid #000;
  border-right: 20px solid #000;
  width: 980px;
}
.container-broken:after {
  display: table;
  content: '';
}

.container {
  margin: 0 auto;
  background: green;
  position: relative;
  border-left: 20px solid #000;
  border-right: 20px solid #000;
  width: 980px;
}

.hero {
  background: red;
  height: 200px;
}
.hero:after {
  display: table;
  content: '';
}

.left-arrow, .right-arrow {
  position: absolute;
  cursor: pointer;
  background: blue;
  margin-top: -20px;
  font-size: 0.8em;
  width: 41px;
  height: 41px;
  top: 50%;
}

.left-arrow {
  left: -10px;
}

.right-arrow {
  right: -10px;
}

.description {
  text-align: center;
  padding: 30px;
}

SassMeister-rendered.html

<div class="container-broken">
  <div class="hero">
    <div class="right-arrow"></div>  
    <div class="left-arrow"></div>
  </div>
</div>

<div class="description">The blue boxes should overlap the black borders by -10/10px:</div>

<div class="container">
  <div class="hero">
    <div class="right-arrow"></div>  
    <div class="left-arrow"></div>
  </div>
</div>