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

Question

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

Answer 1

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
}