Using width and calc on css
<p>I am experimenting a bit with calc on css to define some external space (like an external margin)</p>

<p>For example in this 3 column layout, the resulting width of the central column is a bit diferent than the other two, but I can not figure out how to make the text the same width.</p>

<p>There are some requirements I need.</p>

<ul>
<li><p>I need to use only padding, not margin.</p></li>
<li><p>I can not add padding to the container C3 in this case.</p></li>
<li><p>I want to solve it using the logic under calc. I don't know if the percentages are applied first, or I need to define the paddings first to the computer later solve the percentages...</p></li>
<li><p>I prefer to use the border-box model, because it is solving me a lot of problems on other places of my code... but probably I can sacrifice this one.</p></li>
</ul>

<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>body {
  margin: 0;
  padding 0;
}
* {
  box-sizing: border-box;
}
p {
  text-align: justify;
}
.C3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.C3&gt;div {
  width: 33.33%;
  padding: 50px;
}
.C3&gt;div:first-child {
  background-color: #DFD;
  width: calc(33.33% + 140px);
  padding-left: 140px;
}
.C3&gt;div:last-child {
  background-color: #FEE;
  width: calc(33.33% + 140px);
  padding-right: 140px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="C3"&gt;
  &lt;div&gt;
    &lt;p&gt;1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.&lt;/p&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;p&gt;2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.&lt;/p&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;p&gt;3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.&lt;/p&gt;
  &lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>Any ideas?</p>