title: inline-block elements not aligning horizontally
body: <p>I am unable to align inline-block elements horizontally. From what I've found, there is some baseline alignment in inline-block elements but I couldn't get how.
  It is working if I use 'vertical-align : top'. 
  I have the following doubts : </p>
  
  <ol>
  <li>How is the <strong>baseline</strong> positioned in this sample code.</li>
  <li>On removing the <strong>'display : inline-block'</strong> from the .icon-bar class, the first
  three elements align properly. How?</li>
  <li>On marking the <strong>ul</strong> as 'display : inline' after the previous step, it gets aligned. But not with 'display : inline-block'</li>
  <li>How to align the elements horizontally. Can it be done without the 'vertical-align' property?</li>
  <li>Can elements marked as
  display:inline be parents of elements display:block. Similarly, <strong>does
  'display : inline-block' parent and 'display:block' child cause any
  problems</strong>? Also, does a 'display:block' child in a 'display:
  inline-block' parent extend to full page width  or the parents
  width?</li>
  </ol>
  
  <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>body {
    margin: 0;
  }
  div.header {
    background-color: #f5df5f;
    height: 50px;
  }
  .drawer_section,
  .logo_section,
  .search_section,
  .header_links_section {
    //vertical-align: top;
    height: 50px;
    //border: 2px thick black;
    display: inline-block;
    background: green;
    opacity: 0.5;
  }
  .drawer_section {
    width: 100px;
    text-align: center;
  }
  .logo_section,
  .search_section {
    width: 200px;
    text-align: center;
  }
  .drawer_icon {
    display: inline-block;
    width: 30px;
    text-align: center;
    //line-height: 3px;
  
  }
  .icon-bar {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 5px;
    border-bottom: 2px solid red;
  }
  .header_links_section &gt; ul {
    list-style: none;
    background-color: red;
    //display: inline;
    display: inline-block;
  }
  .header_links_section &gt; ul &gt; li {
    text-align: center;
    display: inline-block;
    background: yellow;
    width: 35px;
    //height: 15px;
    //margin: 0 5px;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;div class="drawer_section"&gt;
      &lt;!-- &lt;div class="drawer_icon"&gt;----&lt;/div&gt; --&gt;
      &lt;div class="drawer_icon"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="info_section"&gt;Hi There&lt;/div&gt;
  
    &lt;div class="search_section"&gt;
      &lt;span class="search_bar"&gt;
      &lt;input type="text" name="search"
       placeholder="Search" /&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="links_section"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link3&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please Check out here : <a href="http://codepen.io/anon/pen/ggByVv" rel="nofollow noreferrer">http://codepen.io/anon/pen/ggByVv</a></p>