1
resposta

Criando um header

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?

1 resposta

Você tem um print da tela para eu ter uma ideia melhor de como está sendo exibido?