title: Fit 3 elements in the same line
body: <p>I have 3 elements in <code>HTML</code> as follows:</p>
  
  <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>.navigation {
    display: inline-block;
    width: 25%;
  }
  .content {
    display: inline-block;
    width: 50%;
  }
  .sidebar {
    display: inline-block;
    width: 25%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navigation"&gt;Navigation&lt;/nav&gt;
  &lt;section class="content"&gt;Section&lt;/section&gt;
  &lt;aside class="sidebar"&gt;Aside&lt;/aside&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This should fit in the 100% width of the container (<code>&lt;body&gt;</code> or any other <code>&lt;div&gt;</code>). However the <code>.sidebar</code> is being dropped to the next line. I tried to setup border, margin and padding to 0 with the <code>!important</code> definition (just to test) but the result is the same. How can I fit this 3 elements in the same line keeping the <code>width</code> property?</p>
  
  <p>Thanks in advance for your answers.</p>