title: calc() not working correctly with complex calculations
body: <p>I know that this topic was posted many times but I can't find answer for my question about <code>calc()</code> function.
  I know the problem with space between <code>+</code> and <code>-</code> but this time the problem is not associated with this.</p>
  
  <p>I can't correctly display 3 images in a row using<br>
  <code>width: calc((100% - 20px) / 3);</code></p>
  
  <p>The last image should be placed in the same row but it's moved down. It has <code>margin-right: 0</code> so expression <code>calc((100% - 20px) / 3)</code> should keeping those three <code>img</code> in a one row next to each other.</p>
  
  <p>Complete code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; padding: 0; background: red;}
  
  img {
    float: left;
    margin-right: 20px;
    width: calc((100% - 20px) / 3);
    
    &amp;.last { margin-right: 0; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- images should be displayed
        - in a row
        - with margin right 20px except last
  -------------------------------------------&gt;
  
  &lt;img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"&gt;
  &lt;img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"&gt;
  &lt;img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"&gt;</code></pre>
  </div>
  </div>
  </p>