This is the SCSS mixin I've been using to style elements whose background color extends to the edges of the viewport.

full-bleed.scss

// Full bleed
// $direction accepts 'up', 'down' or 'none';
// NB using 'up' or 'down' causes the shadow to extend
// to (and beyond) the top or bottom of the viewport
// Only use 'none' on relatively wide elements,
// and set $width to the width of the element
// --------------------------
@mixin full-bleed($color, $direction: none, $width: 400em) {
  @if $color == 'none' {
    box-shadow: none;
    background-color: transparent;
  }

  @else {
    background-color: $color;
    
    @if $direction == none {
      box-shadow: -$width 0 0 0 $color, $width 0 0 0 $color, (-$width * 2) 0 0 0 $color, ($width * 2) 0 0 0 $color;
    }

    @if $direction == down {
      box-shadow: 0 $width 0 $width $color;
    }

    @if $direction == up {
      box-shadow: 0 (-$width) 0 $width $color;
    }
  }
}