Fit 3 elements in the same line
<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>