05 Explained solutions
Compare the reasoning, not just the final appearance. Other correct solutions can satisfy the same requirements.
1. Width calculation
Content-box: border box is 300 + 32 + 4 = 336px. With two 10px margins, the occupied horizontal span is 356px. Border-box: the border box is 300px; its content width is 264px; adding margins gives 320px. These figures assume ordinary horizontal boxes with no competing sizing constraints.
2. Growing with content
A card with no fixed height expands to fit its content. A fixed height can cause text to spill out or be clipped, especially with zoom or translation. Equal-looking card rows are a layout concern, not a reason to discard overflowing information.
3. Image repair
img { max-width: 100%; height: auto; display: block; }The existing max-width can still constrain the 800px width; removing it exposes the narrow-screen overflow. Remove the forced 800px CSS width and 120px height from the experiment and restore max-width: 100%. The HTML width/height attributes still describe the original aspect ratio. The CSS maximum permits shrinking, and auto height preserves that ratio.