Não estou conseguindo achar o por que da lista dos benefícios não ficam ao lado da foto?!
Obrigado
Não estou conseguindo achar o por que da lista dos benefícios não ficam ao lado da foto?!
Obrigado
Oi Pablo, tudo bem? Coloca teu código dentro </> assim tem como te ajudar. Fico no aguardo...
O meu também não! A foto fica por cima da lista de benefícios...
<section class="beneficios">
<h3 class="titulo-principal">Benefícios</h3>
<div class="conteudo-beneficios">
<ul class="lista-beneficios">
<li class="itens">Atendimento aos clientes</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais qualificados</li>
<li class="itens">Pontualidade</li>
<li class="itens">Limpeza</li>
</ul><img src="beneficios.jpg" alt="Barbearia Alura" class="imagem-beneficios">
</div>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
.beneficios {
padding: 3em 0;
}
.conteudo-beneficios {
width: 640px;
margin: 0 auto;
}
.lista-beneficios {
width: 40px;
display: inline-block;
vertical-align: top;
}
.itens {
line-height: 1.5;
}
.itens:first-child {
font-weight: bold;
}
.imagem-beneficios {
width: 60%;
}
Oi Renata, acho que o problema no seu está no width da .lista-beneficios que está 40px quando deveria ser 40%
.lista-beneficios {
width: 40%;
display: inline-block;
vertical-align: top;
}
Oi Renata é exatamente isso que o Igor Andreola disse, o erro está em width, você deve colocar o tamanho em porcentagem e não em pixel. Comigo também aconteceu isso. Esses pequenos detalhes nos deixam doidos :)
Ah, muito obrigada, gente! Realmente, nem me atentei a esse pequeno detalhe! :D