title: Div overlapping another div -Bootstrap
body: <p>First of all Im very new to web development and bootstrap.</p>
  
  <p>Im trying the page to be responsive, but when the browser is resized, divs are overlapping.</p>
  
  <ul>
  <li>here is a pic of zoomed out and zoomed in page --- (<a href="http://imgur.com/a/sPlsf" rel="nofollow">http://imgur.com/a/sPlsf</a>)</li>
  </ul>
  
  <p>As you can see, <strong>"main-content"</strong> is the top div and the bottom white div is the <strong>"content"</strong> </p>
  
  <p>the top 3 pics (<strong>top-hive</strong>) and bottom 2 pics (<strong>bottom-hive</strong>) are also in a separate div. When zoomed out these pics goes beyond its placement div.</p>
  
  <p>Could some one please explain a way around this.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;S.H.I.E.L.D&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;!-- Custom --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div class="nav container"&gt;
      &lt;/div&gt;
  
      &lt;div class="main-content container"&gt;
          &lt;div class="top-hive row"&gt;
              &lt;img src="images/hive1.png"&gt;
              &lt;img src="images/hive2.png"&gt;
              &lt;img src="images/hive3.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="bottom-hive row"&gt;
              &lt;img src="images/hive4.png"&gt;
              &lt;img src="images/hive5.png"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="content container"&gt;
  
      &lt;/div&gt;
  
      &lt;div class="footer container"&gt;
          &lt;h5&gt;Copyright (2015)&lt;/h5&gt;
      &lt;/div&gt;
  
  
  
  
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      background: url(../images/BG_01.png) repeat fixed top center;
      background-size: 100% auto;
  }
  /*NAV*/
  .nav {
      background: url(../images/header_01.png);
      background-position: center;
      height: 417px;
      width: 100%;
      position: relative;
      z-index:2;
  }
  /*MAIN CONTENT*/
  .main-content {
      background: url(../images/CBG_03.png) no-repeat;
      height: 684px;
      background-position: center;
      max-width: 100%;
      text-align: center;
      margin-top: -215px;
      position: relative;
      z-index:1;
  }
  .top-hive {
      margin-top: 106px;
  }
  .top-hive img {
      padding: 5px;
  }
  .bottom-hive {
      margin-top: -60px;
  }
  .bottom-hive img {
      padding: 5px;
  }
  
  /*CONTENT*/
  .content {
      background: url(../images/CBG2_03.png) no-repeat;
      height: 621px;
      background-position: center;
      width: 100%;
      text-align: center;
      margin-top: -12px;
  }
  .text h3 {
      text-transform: uppercase;
      font-size: 2.1em;
  }
  .text p {
      font-size: 1em;
  }
  .footer {
      background: #050719 url(../images/footer_02.png)repeat;
      height: 178px;
      width: 100%;
      text-align: center;
      background-position: center;
  }
  
  /*FOOTER*/
  .footer h5 {
      color: #58a7d9;
      margin-top: 127px;
  }
  </code></pre>