Understanding Flexible Laying

Question

In the standard box model:

Ethan Marcott in Responsive Web Design, p. 35, wrote:

when setting up the flexible filling of an element, your context is the width of the element itself.

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>

Run codeHide result

My question is:

According to what is written in this book, setting up add-ons: shoudn't be correct (but it!).

padding: 2.083333333333%;

Instead of: We should consider the width of the element and 430px. But if we use this value as a context, we get 4.x%.

What will I not get here?

Answer 1

I have not read the book you are referring to, and it is hard to guess what it is saying, because I have no context around the sentence you are quoting.

, :

, , [...]

, , 2.083333333333% .