title: How to override parent containers width property in CSS
body: <p>I am having trouble overriding the parent's width within my CSS.
  Essentially, I have a parent and a child div like:    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent{ width: 768px; background-color: red; }
  .child{ background-color:blue; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;
          //content
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>A lot of elements still use the parents parameter of 768px width, however I wish this one specific child element to extend the entire width of the screen - I have tried doing left: 0, right: 0, clearing the floats and setting the width to auto.
  I also wanted to avoid using !important if I can.</p>
  
  <p>Any suggestions ?</p>
  
  <p>An accurate representation of what I want would look like this:</p>
  
  <pre><code>   _____   
    |par. |
   _|_____|_
  | child   |
  |         |
  |_________|
    |     |
    |_____|
  </code></pre>