title: Why are my div margins overlapping and how can I fix it?
body: <p>I don't understand why the margins of these divs are overlapping.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.alignright {float: right}
  #header .social {margin-top: 50px;}
  #header .social a {display: inline-block;}
  #header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
  #header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
  #header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
  #header .contact span {color: #FFFFFF;}
  #header .search {margin: 10px 0 0;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="alignright"&gt;
      &lt;div class="social"&gt;
          &lt;a href="#" class="twit"&gt;&lt;/a&gt;
          &lt;a href="#" class="fb"&gt;&lt;/a&gt;
      &lt;/div&gt;&lt;!-- social --&gt;
      &lt;div class="contact"&gt;
          Get in Touch: &lt;span&gt;+44 10012 12345&lt;/span&gt;            
      &lt;/div&gt;&lt;!-- contact --&gt;
      &lt;div class="search"&gt;
          &lt;form method="post" action=""&gt;
              &lt;input type="text" value="" name="s" gtbfieldid="28"&gt;
          &lt;/form&gt;
      &lt;/div&gt;&lt;!-- search --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/tOJW5.png" alt="picture"></p>