Por que as coisas ficam empilhadas?

Você já reparou que <div>s ficam uma embaixo da outra, mesmo sobrando espaço do lado? Isso não é bug — é o comportamento padrão.

Elementos têm um "tipo de exibição":

• block (como <div>, <p>, <h1>) — ocupam a linha inteira e empilham na vertical
• inline (como <a>, <strong>) — ficam na mesma linha, do tamanho do conteúdo

O problema clássico: colocar caixas lado a lado (um menu, uma vitrine de produtos) sempre foi difícil no CSS antigo.

🎯 A solução moderna se chama Flexbox — e é o que você vai aprender agora. É, de longe, a ferramenta de layout que você mais vai usar na vida real.