<main class="contain">
  
  <p>This approach uses negative margins and padding to extend the background in both directions. This works great if you're using a single background color for the bar.</p>
  
  <section class="full-width contain">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos unde autem exercitationem doloremque! Aliquid, ut dolorem voluptas quos earum vitae ipsa rem voluptate eum ab quisquam at, corrupti officia totam!</p>
  </section>
  
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi modi consectetur officia dolorum, consequatur autem ipsum odit corrupti vero, suscipit, error laboriosam vel recusandae architecto dignissimos id reprehenderit aperiam itaque!</p>
  
</main>

* { box-sizing: inherit; }
html { box-sizing: border-box; }

.contain {
  padding: 1.5rem 3rem;
}

.full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: lightcoral;
}

@media only screen and (min-width: 46em){
  .contain {
    padding-left: calc(50% - 20rem);
    padding-right: calc(50% - 20rem);
  }
  .full-width {
    padding-left: calc(50vw - 20rem);
    padding-right: calc(50vw - 20rem);
  }
}