title: Two containers overlap
body: <p>I created a new container after an existing container(background image set). The newly added container gets overlapped with the old one. I have increased the padding-top and it works well. But it is necessary to write for all the container classes we use?See image (<a href="https://docs.google.com/file/d/0Bwyjk1QbhhGGXzRuMm4tcDhJeWc/edit" rel="nofollow">https://docs.google.com/file/d/0Bwyjk1QbhhGGXzRuMm4tcDhJeWc/edit</a>)..
   
      </p>
  
  <pre><code>&lt;div class="row"&gt;
        &lt;div class="col-lg-5 col-lg-offset-1   col-xs-5 col-xs-offset-1"&gt;
          &lt;img src="images/logos-1.png" class="img-responsive"/&gt;
        &lt;/div&gt;    
  
        &lt;div class="col-lg-5 col-lg-offset-1   col-xs-5 col-xs-offset-1"&gt;
          &lt;img src="images/logos-2.png" class="img-responsive"/&gt;
        &lt;/div&gt;    
  &lt;/div&gt; &lt;!--row--&gt;
  &lt;/div&gt;
  
  &lt;!--SECOND CONTAINER--&gt;
  
  &lt;div class="container has-bg1"&gt;
  
      &lt;div class="row" &gt;
          &lt;div class="col-lg-4  col-xs-4"&gt;
              &lt;img src="images/blueprint_logo1.png" class="img-responsive"/&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4  col-xs-4" &gt;
              &lt;img src="images/blueprint_logo2.png" class="img-responsive"/&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4  col-xs-4" &gt;
              &lt;img src="images/blueprint_logo3.png" class="img-responsive"/&gt;
          &lt;/div&gt;  
     &lt;/div&gt;&lt;!--row--&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS:</strong>
        .container.has-bg {
        background-image:url(images/book_bg.png);
        background-size: cover;
        }
        .container.has-bg1 {
        background-image: url(images/blueprint.png);
        background-size: cover;
        }</p>