Basic Page Layout with HTML5 & CSS

**Correction
The margin property is not included inside border-box, as this is always outside of the element.
Flex property breakdown in CSS:
flex: 0 0 20%;
First value is flex-grow: Determines how much the flex item can grow relative to other flex items in the same container. Default is 0.
Second is flex-shrink: Controls how much the flex item can shrink relative to other items if space is limited. Default is 1.
Final value and only one we set is flex-basis: Sets the initial size of the flex item before any available space is distributed. Default is auto, but it can also be specified as a length or a keyword like 'content'.