Susy 2.0 responsive grid

Question

I'm converting a layout from Susy 1 to Susy 2.0 and have some things working differently than expected. Am I doing something wrong here? I would like the container to span the width of the page and have a column half the width be in the middle of the page. Inside of that column, 3 equally spaced columns(red, white and blue). I'm not sure how the css is compiling as it is in the screenshot.

header {  
.fullheight {
    @include backImage('../images/img_hero_brightspace-homepage.png');
    @include container(100%);
    .hgroup {
      padding: 150px 0;
      text-align: center;
      h3{
        @include span(8);
        display: block;
        font-weight: $light;
      }
    } //hgroup
    section{
      @include container;
      @include span(6 at 3 of 12);
      .serviceBox{
      @include span(2 of 6);
        width:100%;
        height:40px;
        background-color: white;
      }//serviceBox
       .volunteerBox{
      @include span(2 of 6);
        width:100%;
        height:40px;
        background-color: blue;
      }//volunteerBox
      .partnerBox{
      @include span(2 of 6);
        width:100%;
        height:40px;
        background-color: red;
      }//partnerBox
    }
  } //fullheight
} //header

My Susy Template

$susy: (  
  columns: 12,
  container: 60em,
  gutters: 1/4,
  gutter-position: inside
);

My HTML

<article class="fullheight">
  <div class="hgroup">
    <h3>Providing help to residents of Greater Cincinnati when challenges invade their lives</h3>
   </div>

  <section>
    <div class="serviceBox">

    </div>
    <div class="volunteerBox">

    </div>
    <div class="partnerBox">

    </div>       
  </section>      
</article>   

Answer 1

You have a few issues here, but mainly you just have too much code. You don't want to use both container and span on the same element (one overrides the other), and the same is true for setting a span and then a css width. There would be several ways to implement the layout you want, but here's the one I'd recommend based on what I see:

section{
  @include container(6);

  .serviceBox{
    @include span(2 of 6);
    height:40px;
    background-color: white;
  }//serviceBox

  .volunteerBox{
    @include span(2 of 6);
    height:40px;
    background-color: blue;
  }//volunteerBox

  .partnerBox{
    @include span(2 of 6);
    height:40px;
    background-color: red;
  }//partnerBox
}

As a side note, it's considered bad practice in Sass to nest everything to match the DOM. Nesting is great when you need it, but the less you use it the better — because deep nesting creates long CSS selectors, and high specificity.