title: How to correct Div overlapping?
body: <p>I am writing code for my first site and I am facing a problem. I added a DIV <code>#footer</code> to the code and it is overlapping an existing DIV completely. </p>
  
  <p>The code is below, can you tell me what I am doing wrong, and how I can fix it? </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="header"&gt;
      &lt;div class="nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;ABOUT&lt;/li&gt;
              &lt;li&gt;WORK&lt;/li&gt;
              &lt;li&gt;TEAM&lt;/li&gt;
              &lt;li&gt;CONTACT&lt;/li&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="second_section"&gt;
      &lt;div class="container"&gt;
          &lt;div class="copy"&gt;
              &lt;h1&gt;ACTUATE CONTENT&lt;/h1&gt;
              &lt;h3&gt;Expert content for every business&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="third_section"&gt;&lt;/div&gt;
  &lt;div class="fourth_section"&gt;
      &lt;div class="col"&gt;
          &lt;img src=
          "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png"&gt;
          &lt;h2&gt;Research&lt;/h2&gt;
          &lt;p&gt;We use the most advanced research methods availble to focus down
          into your subject matter.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
          &lt;img src=
          "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png"&gt;
          &lt;h2&gt;Writing&lt;/h2&gt;
          &lt;p&gt;Our writers are seasoned and have honed their craft using the best
          of the best&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
          &lt;img src=
          "https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png"&gt;
          &lt;h2&gt;Editing&lt;/h2&gt;
          &lt;p&gt;We also do editing for up and coming writers in the literary
          genre.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre class="lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
  }
  
  div {
      display: block;
  }
  
  .header {
      background-color: #333;
  }
  
  .nav {
      padding: 0;
      margin: 0 auto;
  }
  
  .nav ul {
  }
  
  .nav ul li {
      color: #fff;
      display: inline-block;
      padding: 20px 30px 20px 20px;
      font-family: serif;
      font-weight: 20px;
  }
  
  .second_section .container {
      background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
      height: 900px;
  }
  
  .copy {
      position: absolute;
      margin: 100px 50px 500px 500px;
      color: #fff;
      font-family: Garamond;
  }
  
  .third_section {
      height: 20px;
      background-color: #000;
  }
  
  .fourth_section .col {
      display: inline-block;
      padding-top: 50px;
      padding-bottom: 75px;
      padding-left: 6%;
      padding-right: 6%;
      text-align: center;
      font-family: Garamond;
      width: 20%;
      float: left;
  }
  
  .fourth_section img {
      height: 32px;
  }
  
  .col {
      text-align: center;
      font-family: Garamond;
  }
  
  #footer {
      height: 200px;
      background-color: #333;
      padding: 20px;
  }
  </code></pre>