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

Imagem não alinha no lado direito da lista

Eu acabei passando para a próxima aula, por isso que tem o cabeçalho e etc, e acabei não percebendo que a imagem não mudou e eu to tentando refazer todo o código dessa parte e não está indo. O HTML:

<!DOCTYPE html>
<html lang=pt-br>
    <head>
        <meta charset="UFT8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="style2.css">
    </head>
    <body>
        <header>
            <h1 class="titulo-principal"> Barbearia Alura</h1>
        </header>
        <img id= "banner" src= "banner.jpg">
            <div class="principal">
            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

            <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>

            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </div>
                <div class="benificios">
                <h3 class="titulo-centralizado"> Benefícios </h3>
                     <ul>
                    <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 class="imagembeneficio" src="beneficios.jpg">
                </div>    
        </body>
</html>

CSS:

body{

}
#banner{
    width: 100%;
}
.principal{
    background: #CCCCCC;
    padding: 30px;
}
.titulo-principal{
    padding-left: 20px;
}
.titulo-centralizado{
    text-align: center;
}
p{
    text-align: center;
}
#missao {
    font-size: 20px;
}
em strong {
    color: red;
}
}
ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}
.itens{
    font-style: italic;
}
.beneficios{
    background: #FFFFFF;
    padding: 20px;
}
.imagembeneficio{
    width: 50%;
}

E eu não sei o que eu errei, to olhando as respostas e conferindo se eu tive o mesmo erro, mas não achei.

2 respostas
solução!

Boa tarde, Catharina! Tudo bem?

Isso está acontecendo pois você declarou a classe como "benificios" e no css como "beneficios".

Tem como testar botar as duas escritas do mesmo jeito? =)

Fico no aguardo!

Muito obrigada, foi desatenção da minha parte e era a ordem também no css que tava errada.