Pessoal, a minha imagem e a lista de benefícios não fica um lado do outro.
.beneficios {
display: block;
padding: 25px;
}
.conteudo-beneficios {
width: 640px;
margin: 0 auto;
}
.lista-beneficios {
width: 40%;
display: inline-block;
}
.imagem-beneficios {
width: 30%;
}
.itens {
line-height: 2.5;
font-weight: bold;
}
<section class="beneficios">
<h3 class="titulo-principal">Benefícios</h3>
<div class="conteudo-beneficios">
<ul class="lista-beneficios">
<li class="itens">Atendimento ao Cliente</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
<li class="itens">Limpeza</li>
</ul>
</div>
<img class="imagem-beneficios" src="beneficios.jpg" alt="Beneficios da Barbearia">
</section>