Juntando tudo: o header da Loja Aurora

Um cabeçalho de site é o exemplo perfeito de Flexbox: o logo à esquerda, o menu à direita, tudo alinhado na vertical.

.header {
  display: flex;
  justify-content: space-between; /* logo <-> menu */
  align-items: center;           /* alinhados na vertical */
  padding: 16px;
}

• space-between empurra logo e menu para as pontas opostas
• align-items: center alinha tudo no meio da altura
• o padding dá o respiro

🎉 Repare: você está usando quatro coisas que aprendeu (flex, justify-content, align-items, padding) para montar um componente real. Isso é fazer CSS de verdade.