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!!
E é assim que está o meu CSS:
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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!!
E é assim que está o meu CSS:
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>
.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