Code snippet to illustrate gaps upfront the two container definitions

gistfile1.html

<div class="mainwrap">
  <header class="container">Header</header>
  <div class="container">Main Content</div>
</div>
<div class="footwrap">
  <footer class="container">Test</footer>
</div>

gistfile2.scss

@import 'compass';
@import 'modular-scale';
@import 'singularitygs';
@import 'breakpoint';
@import 'toolkit';

$grids: 4;
$grids: add-grid(6 at 550px);
$grids: add-grid(9 at 750px);
$grids: add-grid(12 at 900px);

$gutters:0.25;
$gutters: add-gutter(.20 at 900px);

* {
	@include box-sizing('border-box');
	margin:0;
	padding:0;
}

%wrap {
    width:100%;
    @extend %clearfix;
}

.mainwrap {
    @extend %wrap;
    @include box-shadow(black 0.2em 0.2em 0.5em);
    margin-bottom:1em;
}
.footwrap {
    @extend %wrap;
    background-color: #484d51;
    @include background-image(linear-gradient(left, rgb(72, 77, 81), rgb(22, 25, 28)));
}

.container {
    max-width:900px;
    margin: 0 auto;
    height: 7em;
    @extend %clearfix;
}