Aligning gallery with the rest of the content

Question

I'm having a problem with the gallery alignment with the rest of the content. I'm using container with padding that I'm getting through gutters and the gallery is with the padding of the span, plus the padding of the gutters.

I want to make them aligned.

Image that shows the alignment

HTML:

<header id="header">
  <div class="container">
    header
  </div>
</header>
<div id="content">
  <div class="gallery">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div id="sidebar">sidebar</div>

CSS:

@import "susy";

$susy: (
    columns: 12,
    gutter-position: inside,
    global-box-sizing: border-box
);

@mixin container-padding($padding: gutter())  {
    padding: 0 $padding 0 $padding;
}

$gallery_layout: (
    columns: 12,
    gutters: 1/10,
    gutter-position: split
);

@include border-box-sizing;

.container {
    @include container;
    @include container-padding;
}

.gallery {
    > .item {
        @include with-layout($gallery_layout) {
            height: 250px;
            margin-bottom: gutter() * 2;
            background-color: brown;

            @include span(2);
        }

    }
}

#header {
  height: 80px;
  background-color: blue;
}

#content {
  @include span(9);
  background-color: yellow;
}

#sidebar {
  @include span(3);
  background-color: red;
  height: 515px;
}

Note; The margin-bottom: gutter() * 2; is due the gutters split.

Example running here.

@EDIT

It works doing this:

$gallery_layout: (
    columns: 12,
    gutters: 1/10,
    gutter-position: after
);

The only problem though is that it leaves an empty space on the end and don't fill the entire div. - Example here.

Answer 1

Try using the gallery mixin: @include gallery(2);

Here's the updated pen