header {
background-color: var(--background-tertiary-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 38px;
}
.logo {
display: inline-block;
width: 68px;
height: 64px;
}
nav {
display: none;
}
Acho que essa estilização é mais coerente.
Oi, Enzo! Como vai?
Agradeço por compartilhar seu código com a comunidade Alura.
Gostei da sua proposta de estilização! Deixar o header com display: flex e ajustar os itens com justify-content: space-between realmente torna o layout mais equilibrado e limpo. Sua escolha transmite uma boa compreensão de boas práticas de responsividade.
Uma dica interessante para o futuro é testar o uso de gap no flex container para controlar o espaçamento interno, sem precisar ajustar padding em cada elemento. Veja este exemplo:
header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
Esse código cria um espaço automático entre os itens dentro do header, facilitando a manutenção do layout.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!