Clarification about Flexible Padding - css

Question

I'm reading Responsive Web Design by Ethan Marcotte to learn more about building responsive web pages. At one point in the book, he says:
When setting flexible margins on an element, your context is the width of the element’s container.
When setting flexible padding on an element, your context is the width of the element itself. Which makes sense, if you think about the box model: we’re describing the padding in relation to the width of the box itself.
Regarding flexible padding, I've found this to not be the case. The padding is based on the width of the element's containing element. Now I've found this book to be of high quality overall, so I'm confused as to whether there's something I'm not getting, or if the book just got it wrong.
I created a JSFiddle to get to demonstrate.
https://jsfiddle.net/u1fq7ttq/27/embedded/result/
HTML
<section>Content...</section>
<aside>Content...</aside>
CSS
body {
width: 960px;
margin: 0 auto;
}
section {
box-sizing: border-box;
border: 3px solid red;
width: 520px;
height: 500px;
margin: 0 2.0833333%; /* 20px / 960px */
padding: 0 3.125%; /* 30px / 960px */
float: left;
}
aside {
box-sizing: border-box;
border: 3px solid blue;
width: 360px;
height: 500px;
margin: 0 2.0833333%; /* 20px / 960px */
padding: 0 6.25%; /* 60px / 960px */
float: right;
}