The idea
An element occupies space through its content, padding, border and margins. With content-box sizing, padding and borders add to the declared width; with border-box, they fit inside it. Fixed widths can overflow small viewports. Prefer flexible sizing with sensible limits, and make images fit their containers while preserving their aspect ratio.
Worked example
A 300-pixel content-box element with 16-pixel padding on both sides and 1-pixel borders occupies 334 pixels before margins. In a 320-pixel viewport it overflows. Border-box includes that padding and border within the 300 pixels, but a flexible width is still needed when the available parent space is smaller.
Try it
Calculate the outer width of a 240-pixel content-box element with 12-pixel padding and 2-pixel borders on both sides. Recalculate using border-box. Sketch a responsive image container and explain why setting an image's width without preserving its ratio can distort it.