Its worth pointing out that this all works because of the rule:

* { box-sizing: border-box; }

This rule enables you to set a % width of a column and specify a padding in pixels without pushing the width of the columns beyond the 100%.

(I spent ages trying to replicate the bootstrap grid system and just couldn't get it to work until I discovered this rule!)