05 Practice

Return to the lesson. Work in a copy of your project; attempt these before opening solutions.

1. Predict width. A box has width: 300px, padding: 16px, border: 2px solid, and margin: 10px. Calculate the border-box width and total horizontal space with content-box, then border-box.
2. Stress the card. Replace an event title with a much longer invented title and add a paragraph. Verify the card grows. Explain why a fixed height would be risky.
3. Repair an image. Temporarily set the garden image to width: 800px and height: 120px. Observe the distortion and check whether max-width: 100% still protects the page width. Then remove max-width only in this disposable experiment to reveal the overflow. Restore the flexible maximum and proportionate height afterward.

Keep your original working version as a backup before the stress tests.

Open explained solutions after attempting the tasks