HTML, CSS, Flexbox, CSS custom properties

What are you most proud of, and what would you do differently next time?

The centering solution was deliberate — display: flex on the body with min-height: 100dvh instead of 100vh to account for mobile browser UI. CSS custom properties in :root for all colors and font weights — not strictly necessary for a project this small, but building the habit early. Next time I would put the card class directly on main instead of on a div inside it. The div was redundant. I ended up using display: contents on main to fix a layout issue — that was a workaround for a structural mistake I should have caught earlier.

What challenges did you encounter, and how did you overcome them?

The card was leaning to one side on small screens. I added outline: 1px solid red to everything to debug it and discovered main was taking up space in the layout even though it was invisible. The fix was display: contents on main — it removes it from the layout while keeping it in the HTML for accessibility and semantics. I also worked through which CSS unit to use for padding. Percentage calculates from the parent's width even for top and bottom padding, which is not useful here. rem was the right choice — it scales with the user's browser font size preference instead of the container size.

What specific areas of your project would you like help with?

I used display: contents on main to remove it from the layout. It solved the problem but it felt like a workaround. Is there a cleaner structural approach that avoids needing it entirely?