The Size Paradox

Mission Briefing

This is the Day 2 finale. Normally, adding padding and borders makes an element bigger than its defined width. You must keep Spark's total size locked at 100px.

The Concept: Border Box

box-sizing: border-box tells the browser to include padding and border in the element's total width and height.

The Objective

1. Target the .spark-character.
2. Set width and height to 100px.
3. Add 20px padding.
4. Add a 5px border.
5. Set box-sizing to border-box to ensure it remains 100px total.