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

[Dúvida] Minha lista e imagem dos benefícios não ficam alinhadas, porque?

Olá boa tarde, podem me ajudar a solucionar minha dúvida? Não consigo fazer a lista e a imagem dos benefícios ficarem alinhadas, e creio que fiz tudo corretamente como o instrutor fez!!

Imagem site da barbearia Alura

E é assim que está o meu CSS:

código dos benefícioscódigo dos benefícios CSS

5 respostas

Boa tarde

No código HTML você está repetindo duas classes na div e na ul está a mesma nome lista-beneficios, no projeto o professor usa nomes diferentes por isso não deve estar alinhando. Na div lista-beneficios, coloca conteudo-beneficios .

 <section class="beneficios">
        <h3 class="titulo-principal">Beneficios</h3>
        <div class="conteudo-beneficios">
            <ul class="lista-beneficios">
                <li class="itens">Atendimento ao Cliente</li>
                <li class="itens">Espaço Diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
            </ul><img class="imagem-beneficios" src="beneficios.jpg" alt=""><!--O display inline-block interpreta todo o 
                espaçamneto possivel até no HTML, por isso é recomendado que não se tenha espaço entre as tags-->
        </div>
solução!

.conteudo-beneficios{
    width: 640px;
    margin: 0 auto;
}

.lista-beneficios{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.itens{
    line-height: 1.5;
}

.itens:first-child{
    font-weight: bold;
}

.itens::before{
    content: "★";
}

.imagem-beneficios {
    width: 60%;
}

Muito obrigado Sirlan, a imagem está centralizada mas a lista não fica ao lado da imagem.

Você ta usando o reset.css, se tiver usando já não sei o que pode ser teria que ver o seu código inteiro, se não tiver usando pode ser isso, notei que você da dando uma margem na ul, quando não está usando o reset.css o navegador continua com o espaçamento que é criado automaticamente por ele, aí quando você colocou uma margem na ul pode ser que o conteudo da class beneficios ultrapassou o limit, e aí o conteúdo não fica alinhado, então mesmo com o inline-block eles não vão ficar alinhados pode ser isso. Agora se você já tá usando o arquivo aí teria que olhar o código mesmo, não sei se você vai entender a explicação, mas qualquer coisa é só manda o código aqui