Passo 2: Header e navegação
O cabeçalho é a primeira coisa que qualquer visitante vê. Com Flexbox, ele ganha a cara de um site profissional em poucas linhas.
Estudar esta lição interativa →Com a base pronta, entra o Flexbox do Módulo 5: o header vira um contêiner flex com justify-content: space-between (nome de um lado, navegação do outro) e align-items: center (tudo alinhado na mesma altura vertical), o mesmo padrão de navbar que você já praticou. Um acréscimo para telas estreitas: flex-wrap: wrap com um gap deixa o menu descer para uma segunda linha quando não cabe ao lado do nome, sem precisar de media query.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O header virou uma barra escura, com o nome de um lado e a navegação do outro, alinhados verticalmente ao centro.
Repare também no nav dentro do header: ele também é display: flex, com gap entre os links, em vez de cada link carregar sua própria margem lateral, exatamente a lição do Módulo 5 sobre gap substituir margens manuais.
Note que os links do menu usam uma cor neutra no estado normal e clareiam no :hover (Módulo 8), um sinal visual sutil de interatividade, sem exagerar.