Поля и отступы адаптивной верстки(Итан Маркотт — Отзывчивый веб-дизайн)?

Question

[FlexibleCurd]

Доброго времени суток всем!
Прочел в книге Итана Маркотта - Отзывчивый веб-дизайн, такие строки:
"контексты для гибких полей и для гибких отступов немного отличаются.
1. Задавая гибкие отступы для элемента, принимайте за контекст ширину контейнера элемента.
2. Задавая гибкое поле для элемента, принимайте за контекст ширину самого элемента. Подумайте о «боксовой» модели, и эти предложения обретут смысл: мы описываем поле в отношении к ширине самого элемента.
"

Есть такой код
И вот что он делает - обозначено некрасивыми стрелочками со знаком вопроса.

То есть ни поле ни отсуп не выполняет этих слов: Задавая гибкое поле для элемента, принимайте за контекст ширину самого элемента.
Сам элемент div имеет ширину 100px, а у поля всего 50% и он имеет 609px, что явно говорит о том что данные значения берутся от ширины блока контейнера(которым в данном случае является body), а не от самого элемента.

Можно назвать этот вопрос и по-другому: как правильно рассчитать поля и отступы в адаптивной верстки?