Ligando o Flexbox

Para alinhar caixas lado a lado, transforme o container (a caixa que envolve) em um flex container:

.menu {
  display: flex;
}

Só isso já muda tudo: os filhos diretos do .menu param de empilhar e ficam numa linha, lado a lado.

🧠 Modelo mental: display: flex é você dando a ordem "filhos, formem uma fila na horizontal". A caixa de fora vira o "organizador"; as de dentro obedecem.

Importante: o display: flex vai no pai (o container), não nos filhos. Esse é o erro nº 1 de quem começa com Flexbox.