oi gente, boa noite. Poderiam me esclarecer uma coisa? Na aula de HTML e CSS tem uma parte onde devemos mudar o backgroud da classe deixando de ser o fundo branco da tela para o cinza que antes estava como o background do body. Fiz diversas vezes o código e mesmo assim ele não ficou onde deveria. o bloco com a cor ficou na imagem da barbearia e não na parte do "sobre nós" onde era pra ficar. Alguem pode me explicar o que fiz de errado?

Segue o código HTML:

Barbearia Alura

    <img id="banner" src="banner.jpg"

        <div class="principal">

        <h2 class="titulo-centralizado">A Nossa Barbearia</h2>

        <p> <strong>Sobre a Barbearia Alura</strong>:</p>
        <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de <strong>melhor</strong> 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>.
        </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.</em>
        </p>
</div>

<div class="Beneficios">
    <h3 class="titulo-centralizado">Beneficios</h3>
    <ul>
    <li class="itens">Atendimento</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=imagembeneficios>

</div>

Codigo 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 }

strong { color: #FF0000; }

.itens { font-style: italic; }

.Beneficios { background: #FFFFFF; padding: 20px; }

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

.imagembeneficios { width: 50%; }