title: How to make a child div full width of browser's viewport ignoring parent's position (margin & padding) and width
body: <p><a href="https://i.stack.imgur.com/MND77.png" rel="nofollow noreferrer">This image describes the story. I want to make purple div same as green div . </a>Can someone explain me how to make a child div full width while parent's margin &amp; padding is unknown ?</p>
  
  <pre><code>&lt;div class="parent"&gt;
     &lt;div class="child1"&gt;
     &lt;/div&gt;
     &lt;div class="child2"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am mainly <strong>stuck at adjusting child div's margin &amp; padding.</strong></p>
  
  <p>Note : parent div's width is margin &amp; padding is unknown
  <a href="https://i.stack.imgur.com/GbOfN.png" rel="nofollow noreferrer">plz checkout the image red portion is parent and purple color is child, I want the purpule portion come out and take the full width of viewport</a></p>