Understanding the flexible padding

Question

Under the regular box model:

Ethan Marcotte in Responsive Webdesign, page 35, wrote:

when setting flexible padding on a element, your context is the width of the element itself.

Please take a look at the following example:

.main-wrapper {
  width: 98%; /*960px - to give some space on the viewport*/ 
}

.box-one,
.box-two {
    width: 44.791666666667%; /* 430 / 960 */
    float: left;
    margin: 30px 0 20px 0;
    padding: 2.083333333333%; /* padding should be 20px*/
    text-align: center;
}

.box-one {
    margin-right: 2.083333333333%; 
    /*margin is relative to the container (here 960px), so:
      20/960
    */
    background-color: red;
}

.box-two {
    background-color: blue;
}

<div class="main-wrapper">

  <div class="box-one">
    <p>box one here</p>
  </div>

  <div class="box-two">
    <p>box two here</p>
  </div>

</div>

My question is:

According to what is wrote on that book, the padding setting of: shoudn't NOT be correct (but it is!).

padding: 2.083333333333%;

Instead: We should take into consideration the element width itself and that is 430px. But IF we use that value as context, we get 4.x %.

What am I NOT getting here?

Answer 1

I haven't read the book you refer to and it is difficult to guess what it says as I don't have the context around the sentence you quote.

This said, if you reffer to the specs about percentage padding calculation :

percentage

The percentage is calculated with respect to the width of the generated box's containing block, [...]

So the percentage is calculated according to the parent's width and therefore the 2.083333333333% value is correct.