title: Why inner container is not fitting in the outer container?
body: <pre><code>.main
  {
      background-color:#669;
      width:1200px;
      margin-left:auto;
      margin-right:auto;
      height:1000px;
  }
  
  
  .content
  {
      background-color: #CCF;
      width:100%;
      height:1000px;
      margin-top:5%;
      position: absolute;
  }
  </code></pre>
  
  <p>If you see the main class has width <code>1200px</code> and I want every <code>div</code> to be fit within <code>1200px</code>.</p>
  
  <p>I set the width of the content class to <code>100%</code>, assuming that it will encounter <code>1200px</code> as its final limit.</p>
  
  <p>But, it's not happening. It is actually extending from the main class and occupying entire page?</p>