Removing extra margin with Susy

Question

I'm using Susy framework and really enjoying it. But I have a slight issue with the added extra margins. Here is a working example of what i'm trying create here. What is causing the extra margins on the children of the hero__about div and how can I fix it?

HTML

<div class="hero">

    <div class="grid">

        <div class="hero__image"></div>

        <div class="hero__summary">

            <h1 class="hero__heading"></h1>
            <p class="hero__text"></p>

            <div class="hero__about">

                <div class="hero__about__education">
                       <h3></h3>
                       <p></p>
                </div>

                <div class="hero__about__interest">
                      <h3>Interest</h3>
                      <p></p>
                </div>

                <div class="hero__about__email">
                      <h3>Say Hello</h3>
                      <p></p>
                </div>

            </div>

        </div>  

    </div>

</div>

SCSS

$susy: (
  columns: 16,
  global-box-sizing: border-box,
  debug: (image: show),
  gutters: 20px/40px,
  gutter-position: split
);

.grid{
  @include container(960px);
 }


.hero{
  .hero__image{
    @include span(4 of 16);
   }

   .hero__summary{
    @include span(12 of 16 last);
   }

   .hero__about__education{
     @include span(12 of 12);
   }

  .hero__about__interest{
    @include span(6 of 12);
  }

  .hero__about__email{
    @include span(6 of 12);
   }
 }

Answer 1

You can do gutter overrides:

change split to either inside or inside-static.

http://susydocs.oddbird.net/en/latest/settings/#gutter-override

inside-static seems to work. I don't recommend doing split.

Answer 2

If you are using split gutters, you need to let Susy know when you nest. There's a nest keyword that you pass to the parent, to remove those extra gutters.

.hero__summary{
  @include span(12 of 16 last nest);
}

Inside gutters work the same way. You can use inside instead of inside-static if you don't want set widths. Also worth noting that setting column-width shouldn't break your layout in this case. It may be a misleading name, because it won't actually affect your columns at all unless you also set math: static.