Singularity Grid System showing the grid when using a 'container'

I have a Singularity layout that puts padding either side of a 'container' like proposed in the Singularity issues here: https://github.com/Team-Sass/Singularity/issues/91

.container {
  // Sets a max width. Site will be fluid until it reaches 960px, then stick there.
  max-width: 960px;
  // Centers the container.
  margin: 0 auto;
  // Sets padding equal to a gutter.
  padding-left: gutter-span();
  padding-right: gutter-span();
  // Might as well clearfix it as well.
  @include clearfix;
}

The basic want for this is so there's a gap either side so it looks cushioned on smaller screens.

What I don't understand is on what element I would show the grid using the @include background-grid whilst developing.

If I put it on the .container then the grid will display under the padding, which is not really part of the grid. Of course, I could create an element inside that, but that element is purely for visual development purposes and so is redundant once I switch the grid display off.

You can see on the image below how the black line goes out to the edge of it's parent .container but the grid is going beyound that.

So you use padding to add gutters to container. Backgrounds happen to stretch to padding gutters, so your grid is off.

The head-on solution is to use a subcontainer. Apply padding to the outer container. Apply clearfix and grid background to the inner container.

background-clip: content-box is indeed a better solution. You don't need debug grid background in IE8 anyway.