Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Alinhamento do desafio proposto

Pessoal, boa tarde!

Estou tentando implementar o header da página de produtos na página index.html. Porem, os itens não estão seguindo o alinhamento inline, poderiam me auxiliar?

O a:hover, entre outras coisas está funcionando corretamente, apenas a disposição em linha está com erro.

                <div class="caixa">
                    <h1><img src="imagens/logo.png" alt="Logo da Barbearia Alura"></h1>

                    <nav class="menu">
                        <ul >
                            <li><a href="index.html">Home</a></li>
                            <li><a href="produtos.html">Produtos</a></li>
                            <li><a href="contato.html">Contato</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

.menu {
    position: absolute;
    top: 110px;
    right: 0;
}

.menu ul {
  display: inline-block;
  padding:0px;
  margin:0px;
  list-style: none;
}

.menu ul li  {
    display: inline;
    margin: 0 0 0 15px;
}

.menu a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    cursor: pointer;
}

.menu a:hover {
  color: #c78c19;
  text-decoration: underline;
}
2 respostas
solução!

Resolvi colocando uma classe na lista de benefícios. Obrigado.

Fala Anderson, tudo bem? Muito bom, mandou bem.

Abraços e bons estudos.