Baseado na aula defini o display: flex; para o cabeçalho o que faz com que os elementos do header fiquem um ao lado da outra, depois usei a propriedadealign-items: center; para alinha os itens. Usando o justify-content: space-between; consegui posicionar a logo no lado direito e o menu no lado esquerdo.
.cabecalho {
display: flex;
align-items: center;
justify-content: space-between;
}No menu com a propriedade display: flex; deixei os itens filhos de .menu um ao lado do outro e usei a propriedade margin para obter um espaço entre os elementos da lista do menu.
.menu {
display: flex;
}
.menu-item {
margin-left: 15px;
margin-right: 15px;
}