Tente colocar no Css a tag: ul antes do h2 e depois de . beneficios

ou pode colocar nessa ordem:

#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: #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%; }

professor, ainda nao funcionou :C ele deu um espaco mas ainda n ficou igual o do professor.

body {

}

#banner { width: 100%; } .principal{

background: #CCCCCC  

} h1 { text-align: center; } P { text-align: center; }

#missao { font-size: 20px; }

em strong {

color: #f00;

}

.itens { font-style: italic; } .beneficio { background-color: #fFFF; padding: 20px;

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

h2 { text-align: center; }

        <p>no coração da cidade a Barbearia Alura 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> missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

        <p>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="beneficio">
        <h2>beneficios</h2>
        <ul>
            <li class="itens">atendimento aos clientes</li>
            <li class="itens">Espaco diferenciado</li>
            <li class="itens">Localizacao</li>
            <li class="itens">profissionais Qualificados</li>
        </ul>
        <img src="beneficios.jpg"class="imagembeneficios">
    </div>
</body>

O meu também estava com esse problema e eu coloquei dentro da classe beneficios que vem antes da tag

• lá no html. Ficou assim:

  .beneficios {
      background: rgb(211, 211, 211);
      display: inline-block;
      vertical-align: top;
      width: 30%;
      margin-right: 10%;

  }

  Não sei se é a melhor forma de resolver, mas deu certo.