title: Adding text moves entire div down several hundred px?
body: <p>I'm having a problem formatting my html page.  I have two divs side by side (aligned that way by using &quot;display: inline-block&quot;.  When I add content to one of them, In this case, an h3 element with the word &quot;Skills&quot; in it, it moves the entire left div down by several hundred pixels.  Why does it do this?</p>
  <p>As a bonus question, why can't I use the full 100% of the outer div?  When the two divs are aligned (everything is the same, but remove the text &quot;Skills&quot;), there is a space in between them.  I'm only able to use about 98% of the width of the outer container.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Resume&lt;/title&gt;
          &lt;style&gt;
              div {border: 1px solid black;}
              #outer {width: 740px; height: 975px;}
              #head {margin: 0px; padding: 30px;}
              * {font-family: monospace;}
              p {font-size: 14px;}
              hr.mainhr {width: 95%; height: 5px; background: rgb(138, 240, 240); border: none; border-radius: 3px;}
              #name {border-radius: 10px; margin-left: 40px; background: rgb(172, 172, 172); padding: 10px; border-bottom: 5px solid rgb(138, 240, 240); width: 80%;}
              #summary {background: rgb(172, 172, 172); border-radius: 10px; border: none; padding: 15px;}
              #sumhead {border-radius: 10px; border-bottom: 5px solid rgb(138, 240, 240); padding-left: 10px;}
              #personalinfo {margin-bottom: 10px;}
              #personalinfo &gt; p {text-align: center;}
              #sidebar {width: 32.25%; display: inline-block; height: 400px; margin: 0px;}
              #main {width: 66.2%; display: inline-block;height: 400px; margin: 0px;}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id=&quot;outer&quot;&gt;
              &lt;div id=&quot;head&quot;&gt;
                  &lt;h1 id=&quot;name&quot;&gt;{fullname}&lt;/h1&gt;
                  &lt;hr class=&quot;mainhr&quot;&gt;
                  &lt;div id=&quot;personalinfo&quot;&gt;
                      &lt;p&gt;&amp;emsp;&lt;img src=&quot;https://i.pinimg.com/originals/bb/18/bd/bb18bdbbef437b2d50518db5a8292c94.png&quot; width=&quot;16px&quot; height=&quot;10px&quot; /&gt; {email} | 
                          &lt;img src=&quot;https://cdn2.iconfinder.com/data/icons/font-awesome/1792/phone-512.png&quot; width=&quot;10px&quot; height=&quot;10px&quot; /&gt; {phonenum} | 
                          &lt;img src=&quot;https://cdn3.iconfinder.com/data/icons/unicons-vector-icons-pack/32/location-512.png&quot; width=&quot;10px&quot; height=&quot;10px&quot; /&gt; {location} | 
                          &lt;img src=&quot;https://image.flaticon.com/icons/png/512/174/174857.png&quot; width=&quot;10px&quot; height=&quot;10px&quot; /&gt; &lt;a href=&quot;{linkedin}&quot;&gt;LinkedIn Profile&lt;/a&gt; | 
                          &lt;img src=&quot;https://pics.freeicons.io/uploads/icons/png/21201021021574330934-512.png&quot; height=&quot;10px&quot; width=&quot;10px&quot; /&gt; &lt;a href=&quot;{portfolio}&quot;&gt;Portfolio&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id=&quot;summary&quot;&gt;
                      &lt;h3 id=&quot;sumhead&quot;&gt;Professional Summary&lt;/h3&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae mi orci. 
                          Cras aliquet magna turpis. Mauris risus odio, accumsan pellentesque sem quis, pretium fermentum massa. 
                          Integer volutpat eros at leo ultrices euismod. Maecenas maximus neque eu efficitur iaculis. 
                          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque a semper sapien. 
                          Nunc venenatis quam eu maximus rutrum. Maecenas finibus rhoncus suscipit.
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id=&quot;sidebar&quot;&gt;
                  &lt;div id=&quot;skills&quot;&gt;
                      &lt;h3&gt;Skills&lt;/h3&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id=&quot;main&quot;&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>