<div class="first">VW + psuedo-element</div>

<div class="second">VW + padding</div>

<div class="third">Percentage + padding</div>

$width: 300px;
$bar-color: rgba(darksalmon, .5);
$content-color: salmon;

div{
  width: $width;
  margin: 0 auto;
  position: relative;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 300;
  line-height: 60px;
  color: darken(salmon, 50%);
  &:before, &:after{
    content: "";
    height: 100%;
  }
  &.first{
    background: $content-color;
    &:before{
      position: absolute;
      width: 100vw;
      background: $bar-color;
      left: calc(-50vw + #{$width / 2});
      z-index: -1;
    }
  }
  &.second{
    width: 100vw;
    box-sizing: border-box;
    padding: 0 calc(50vw - #{$width / 2});
    background-origin: content-box;
    background-repeat: no-repeat;
    background-image: linear-gradient($content-color, $content-color);
    background-color: $bar-color;
  }
  &.third{
    width: 100%;
    box-sizing: border-box;
    padding: 0 calc(50% - #{$width / 2});
    background-origin: content-box;
    background-repeat: no-repeat;
    background-image: linear-gradient($content-color, $content-color);
    background-color: $bar-color;  
  }
}