Using width and calc on css

Question

I am experimenting a bit with calc on css to define some external space (like an external margin)

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.

There are some requirements I need.

• I need to use only padding, not margin.

• I can not add padding to the container C3 in this case.

• 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...

• 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.

body {
  margin: 0;
  padding 0;
}
* {
  box-sizing: border-box;
}
p {
  text-align: justify;
}
.C3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.C3>div {
  width: 33.33%;
  padding: 50px;
}
.C3>div:first-child {
  background-color: #DFD;
  width: calc(33.33% + 140px);
  padding-left: 140px;
}
.C3>div:last-child {
  background-color: #FEE;
  width: calc(33.33% + 140px);
  padding-right: 140px;
}

<section class="C3">
  <div>
    <p>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.</p>
  </div>

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

  <div>
    <p>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.</p>
  </div>
</section>

Any ideas?

Answer 1

4castle answer made me realize that yes, I was repeating something, but i found it that was the 50px.

So in my margin I needed to substract 50px from the calc, and now I have 90px.

The diference is subtle but now I have the exact same column text size.

body {margin: 0; padding 0;}

*{box-sizing: border-box;}

p {
	text-align: justify;}

.C3 {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;}

.C3>div {
	width: 33.33%;
	padding: 50px;}

.C3>div:first-child {
	background-color: #DFD;
	width: calc(33.33% + 90px);
	padding-left: 140px;}
	
.C3>div:last-child {
	background-color: #FEE; 
	width: calc(33.33% + 90px);
	padding-right: 140px;}

<section class="C3">
<div>
	<p>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.</p>
</div>

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

<div>
	<p>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.</p>
</div>
</section>

Answer 2

Since you're using box-sizing: border-box, the width already includes the padding. The 140px are being added twice.

width: 33.33% is all that's needed.