title: How to add space between two tags vertically(P.S My margin -top is not working)
body: <p>I was Building a website where I encountered a problem that my h1 content is overlapping with my navigation bar. I have used margin-top tag in css and its not working.</p>
  
  <pre><code>&lt;div class="main"&gt;
  
    &lt;div class="header"&gt;
      &lt;div class="header_resize"&gt;
        &lt;div class="menu_nav"&gt;
  
          &lt;ul&gt;
            &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About Voicecom&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Marketing Sevices&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;IT Management Services&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt; Employement Opportunities &lt;/a&gt; &lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt;
        &lt;div class="clr"&gt;&lt;/div&gt;
  
        &lt;div class="logo"&gt;&lt;h1&gt;&lt;a href="index.html"&gt;&lt;span&gt;Voicecom &lt;/span&gt; Technologies&lt;br /&gt;&lt;small&gt;Communications Any Time Any Where&lt;/small&gt;&lt;/a&gt;&lt;/h1&gt;&lt;/div&gt;
        &lt;div class="clr"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="hbg"&gt;
      &lt;div class="hbg_resize"&gt;
        &lt;img src="images/hbg_img.jpg" width="334" height="223" alt="img" class="hbgimg" /&gt;
        &lt;h2&gt;Read me first...&lt;/h2&gt;
        &lt;p&gt;&lt;strong&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl.&lt;/strong&gt;&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie.&lt;/p&gt;
        &lt;a href="#"&gt;&lt;img src="images/readmore.jpg" width="115" height="33" alt="read more" border="0" /&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My CSS File</p>
  
  <pre><code>body {
     margin: 0;
     padding: 0;
     width: 100%;
     color: #5f5f5f;
     font: normal 12px/1.8em Arial, Helvetica, sans-serif;
  }
  
  html,
  .main {
      padding: 0;
      margin: 0;
      background-color: #fff;
  }
  
  .clr {
      clear: both;
      padding: 0;
      margin: 0;
      width: 100%;
      font-size: 0px;
      line-height: 0px;
  }
  
  h1 {
      margin: -32px 0 0 0;
      padding: 24px 0;
      color: #c1c1c1;
      font: bold 22px/1.2em Arial, Helvetica, sans-serif;
      text-transform: uppercase;
  }
  
  h1 a,
  h1 a:hover {
      color: #D88100;
      text-decoration: none;
  }
  
  h1 span {
      color: #ffa800;
      font-size: 40px;
      margin-top: 2000px;
  }
  
  h1 small {
      font: normal 13px/1.2em Arial, Helvetica, sans-serif;
  }
  
  h2 {
      font: bold 24px Arial, Helvetica, sans-serif;
      color: #a3ce67;
      padding: 8px 0;
      margin: 8px 0;
  }
  
  p {
      margin: 8px 0;
      padding: 0 0 8px 0;
      font: normal 12px/1.8em Arial, Helvetica, sans-serif;
  }
  
  a {
      color: #5e8525;
      text-decoration: underline;
  }
  </code></pre>
  
  <p>Please Do let me know if someone want more of the code, I have hereby attached only part of it.
  Please Help!!!!</p>