Centre the boxes using justify-content
Set justify-content on the flex container to horizontally centre all three boxes. Match the target output exactly.
CSS
style.css
Target
goal
Output
live
checks:
display
justify-content
gap
justify-content
Distributes flex items along the main axis. When flex-direction: row the main axis is horizontal — controls how leftover space is distributed between and around items.
main axis
The primary direction flex items are placed in. Set by flex-direction. justify-content always works along this axis; align-items works on the perpendicular cross axis.
flex-direction: row → main axis → flex-direction: column → main axis ↓