Olá, me chamo Daniel sou iniciante na area da programação e tenho estudado HTML e CSS. Estou construindo um site para fixar o conhecimento colocando-os em prática. Abaixo segue o cabeçalho que estou tentando criar, mas estou tendo muitas dificuldades na estilização e na estruturação. O cabeçalho ele deve conter a logo, o menu de navegação (com 4 links) e dois botoes de "entrar" e "cadastrar" a minha dificuldade esta sendo em colocar todos esses itens na mesma linha e com espaçamentos agradáveis.
Estou a bastante tempo tentando e não tenho conseguido sair dessa parte...
<ul class="menu__cabecalho">
<li><a href="#" class="menu-item">Sobre</a></li>
<li><a href="#" class="menu-item">Menu</a></li>
<li><a href="#" class="menu-item">Recursos</a></li>
<li><a href="#" class="menu-item">Galeria</a></li>
</ul>
<button class="botao">Entrar</button>
<button class="botao">Cadastrar</button>
</div>
</header>
CSS:
.cabecalho { background: #fcf9f9; padding: 50px; display: flex; justify-content: space-between; align-items: center; }
.cabecalho__logo { width: 15%; }
.menu-item { color: black; background: #4682B4; }
header li { display: inline; text-align: right; }
.botao { display: flex; position: relative; flex-direction: row; justify-content: flex-end; }
Alguem poderia me ajudar?