Learning Notes: Flexbox Alignment

When using flex-col (vertical stack), the alignment properties switch roles compared to flex-row:

1. items-center: This is what you needed. In a column layout, this centers items horizontally (left-to-right).
2. text-center: items-center centers the box, but the text inside that box might still be left-aligned. Adding text-center ensures the text itself is centered.
3. Responsive Reset (xl:items-start): Since Tailwind is "mobile-first," items-center applies to all screens. You must explicitly say "On Extra Large screens, go back to the start" using xl:items-start.