Pad container with gutter and fix visual grid

Another one to experiment with. It’s possible I’m doing something wrong, but I often find the need to add padding to the `outer-container()`, but then this breaks the visual grind. This pattern can fix that:

``` scss
.container {
padding-left: $gutter;
padding-right: $gutter;
@include outer-container();
}

@if $visual-grid == true {
body:before {
@include calc(width, '100% - #{ $gutter * 2 }');
@include calc(max-width, '#{ $max-width } - #{ $gutter * 2 }');
}
}
```

Start with the SCSS pattern in the issue body and inspect the container and visual-grid helpers it refers to. Confirm how gutter padding affects the visual grid, then verify that padded containers and the grid remain aligned at the supported layout sizes.

Written by the indexing model from the issue text.