Entrar Ainda não tem acesso?
2
respostas

espaçamento da lista de benefícios

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Adriana
| 94k xp | 7 posts

estou com um problema com a pagina, a lista de benefícios está colada no lado esquerdo ao invés de ficar próxima a imagem, e minha imagem mesmo estando 60% está enorme. Esse é o css dos beneficios: .beneficios { padding: 3em 0; background: #888888; }

.imagem-beneficios { width: 60%; }

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

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

.itens:before { content: "★" }

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

e aqui o html:

Benefícios

        <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>
            </ul><img src="beneficios.jpg" class="imagem-beneficios">
        </section>
2 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Adriana, tudo bem?

Vamos tentar fazer essas alterações e corrigir os erros :

Você está usando alguma classe na tag section? Se sim, qual a formatação que você adicionou a ela?

Na sua classe class="lista-beneficios", modifique:

display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;

E em imagem-beneficios, altere:

.imagem-beneficios { width: 60%; }

Faça as alterações e veja se corrige :}

por Adriana
| 94k xp | 7 posts

Você está usando alguma classe na tag section? Se sim, qual a formatação que você adicionou a ela?

sim,<section class="beneficios"

no css está:

.beneficios { padding: 3em 0; background: #888888; }

fiz, as alterações mas não obtive resultado