title: Added display:inline-block, but my HTML elements are still spilling over into a different line
body: <p>I would like to keep some DIV elements on the same plane, and so per the advice I got in this forum, I created these elements</p>
  
  <pre><code>&lt;div class="profileField"&gt;
      Birthday&lt;br&gt; 
      &lt;div class="select"&gt;&lt;div class="select-styled"&gt;Select Month&lt;/div&gt;&lt;ul class="select-options"&gt;&lt;li rel=""&gt;Select Month&lt;/li&gt;&lt;li rel="1"&gt;January&lt;/li&gt;&lt;li rel="2"&gt;February&lt;/li&gt;…&lt;li rel="12"&gt;December&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  &lt;div class="select"&gt;&lt;div class="select-styled"&gt;Select Day&lt;/div&gt;&lt;ul class="select-options"&gt;&lt;li rel=""&gt;Select Day&lt;/li&gt;&lt;li rel="1"&gt;1&lt;/li&gt;…&lt;li rel="30"&gt;30&lt;/li&gt;&lt;li rel="31"&gt;31&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  &lt;div class="select"&gt;&lt;div class="select-styled"&gt;Select Year&lt;/div&gt;&lt;ul class="select-options"&gt;&lt;li rel=""&gt;Select Year&lt;/li&gt;&lt;li rel="1900"&gt;1900&lt;/li&gt;&lt;li rel="1901"&gt;1901&lt;/li&gt;…&lt;li rel="2020"&gt;2020&lt;/li&gt;&lt;li rel="2021"&gt;2021&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>and here are the styles, which both include “display:inline-block”</p>
  
  <pre><code>.select {
      cursor: pointer;
      display: inline-block;
      position: relative;
      font-size: 16px;
      color: #fff;
      width: 220px;
      height: 42px;
  }
  .profileField {
          padding: 10px;
          font-family: 'Oxygen', sans-serif;
          font-weight: 300;
          font-size: 20px;
          display: inline-block; 
  }
  </code></pre>
  
  <p>The above sits in a container, with style</p>
  
  <pre><code>#profileContainer {
      border-radius: 25px;
      background: #000000;
      padding: 10px;
      display: inline-block;
      position: fixed;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }
  </code></pre>
  
  <p>but even this has display:inline-blocks o I’m not sure why these elements are going down to new lines.  I crated this JSFiddle to demonstrate the problem — <a href="https://jsfiddle.net/4g7r5zt0/6/" rel="nofollow">https://jsfiddle.net/4g7r5zt0/6/</a></p>