Oi, Camila! Como vai?
Seu código funciona, mas usar altura fixa no header pode te trazer problemas quando o conteúdo crescer ou quando a tela for menor. A parte de flex, justify-content e align-items está ótima — só vale deixar o header mais flexível.
Veja este exemplo mais seguro e responsivo:
header {
padding: 0 48px;
background-color: var(--background-tertiary-color);
display: flex;
justify-content: space-between;
align-items: center;
/* sem height fixa */
}
E se quiser ajudar no mobile:
@media (max-width: 600px) {
header {
flex-direction: column;
gap: 16px;
padding: 16px;
}
}
Isso evita cortes de conteúdo e deixa o layout mais flexível.
Exemplo rápido e explicado
/* header responsivo sem altura fixa */
header {
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
Esse código deixa o header ajustar a altura automaticamente e alinha os itens corretamente.
Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
