Div not confirming to grid. Defined an 8 column grid and elements are binding to 4 column. Susy

My div is not matching up to my grid. It's an 8 container grid and when I tell the element to span(2), it acts as if the grid were 4. Is this because I'm not defining a global grid in $susy?

Some contextual code:

First I defined a container grid:

 #grid{
        @include container(8);
        gutter-width: 5%;
       }

Then I added it to the html:

<main id="grid">...</div>

Then I nested the div in css:

#object1{
    @extend %object;
    @include span(2);
    }

and added it to the html

<main id="grid">
   <div id="object1">a</div>
</main>

edit: fixed (must define context even in child elements. why is that? if i can set span according to any grid amount that i want, then what's the point of all this with-layout and context following hokey pokey? If span doesn't read context from the parent element then what the hell is the point of susy?)

Here's the result

You don't have to pass the explicit context to every single container/span element if you set it globally. Susy (and any other Sass plugin) is not aware of the DOM, and so it is not aware that #object1 is inside #grid which has been set to 8 columns.

Every item needs context from somewhere. If you don't pass it in explicitly, Susy checks the global settings, which default to 4 columns. If you change the global setting to 8, then you don't need to pass context into your mixins. The with-layout mixin is just one way to change the global setting temporarily, for a block of nested code.

.default {
  @include span(2); // uses global default of 4
}

$susy: layout(8);

.custom {
  @include span(2); // uses global setting of 8

  @include with-layout(4) {
    @include span(2); // uses temporary setting of 4
  }

  @include span(2); // uses global setting of 8 again
}