title: How to keep content in a container, but extend it's background full width in CSS?
body: <p>I am trying to develop a design that looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/hc5kv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hc5kv.jpg" alt="Design image"></a></p>
  
  <p>In the design above the red lines are the sides of the container. I am keeping the content of the section within a container div like so:</p>
  
  <pre><code>.container {
  width: 1200px;
  margin: 0 auto;
  }
  </code></pre>
  
  <p>But I would then want the blue background div to the content on the left to extend the full width of the screen, breaking out of the container while keeping the content within the blue background inside the container. </p>
  
  <p>I can't seem to find the best way to dev this out keeping the content in the container, but the blue background div to extend all the way to the left of the screen.</p>