5
respostas

Benefícios não ficam ao lado da foto

Não estou conseguindo achar o por que da lista dos benefícios não ficam ao lado da foto?!

Obrigado

5 respostas

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