CSS divs alignment inside div with 100% width
<p>I searched for the answer on my question, but weirdly didn't find it. I need to align 4 divs inside main div. The main div should be 100% in width and every inner div should be 25% of the main div to achieve 4 div of the same width in one row. My code is:</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>html {
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
}
.container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
}
.inner-div {
  display: inline-block;
  width: 25%;
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="inner-div yellow"&gt;
    yellow
  &lt;/div&gt;
  &lt;div class="inner-div blue"&gt;
    blue
  &lt;/div&gt;
  &lt;div class="inner-div red"&gt;
    red
  &lt;/div&gt;
  &lt;div class="inner-div green"&gt;
    green
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>For some reason the last div doesn't fit in in the same row as the others. I can't understand why this is happening! Please help.</p>