title: Header tags push parent element down
body: <p>so, this turned out to be a duplicate question:
  <a href="https://stackoverflow.com/questions/29165162/space-between-an-inline-block-element-and-a-block-element">space between an inline-block element and a block element</a>. I just worded my question wrong when searching the site.</p>
  
  <p>I have my site code that I put up in a <a href="https://jsfiddle.net/mktd/Lxh7hsbu/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;section class="section-left"&gt;
          &lt;header&gt;&lt;h1&gt;My Name&lt;/h1&gt;&lt;/header&gt;
          &lt;content&gt;
              &lt;p&gt;&lt;/p&gt;
          &lt;/content&gt;
      &lt;/section&gt;&lt;section class="section-right"&gt;
          &lt;header&gt;&lt;h3&gt;Hello World!&lt;/h3&gt;&lt;/header&gt;
          &lt;content&gt;
              &lt;p&gt;&lt;/p&gt;
          &lt;/content&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my css:</p>
  
  <pre><code>#main {
      background-color:blue;
      height:92%;
  }
  
  #main section {
      display:inline-block;
  }
  
  .section-left{
      width:30%;
      height:100%;
      background-color:red;
  }
  
  .section-right{
      width:70%;
      height:100%;
      background-color:orange;
  }
  </code></pre>
  
  <p>When I take out the h* tags, the section elements go back to being displayed correctly with no space in them. But, as soon as I put a h tag in them, the section-left either moves nearly all the way to the bottom, or if I add a border to section-left (which i found on another forum) it pushes section-right down below it.</p>
  
  <p>The only thing I can find that happens, is when viewing thru the chrome dev tools is a:</p>
  
  <pre><code>webkit-margin-before:.83em;
  webkit-margin-after:.83em;
  </code></pre>
  
  <p>Can anyone see if I am doing something incorrect on this? </p>
  
  <p>Also, if I were to just change it for the two sections (which I may put into article tags?) to
      float:left;</p>
  
  <p>What type of code would I need to insert to make it appear like it does now?</p>