Dificuldade em deixar imagem e lista lado a lado

  <h3 class="titulo-centralizado">Beneficíos</h3>

  <div class="conteudo-beneficios">

      <ul class="lista-beneficios">

          <li>Troca de Tela</li>
          <li>Desoxidação</li>
          <li>Reparo de Softwares</li>
          <li>Troca de Baterias</li>
          <li>Acessórios</li>
          <li>Entre varios outros Serviços</li>
      </ul><img class="imagem-celular" src="Celulares.jpeg">
</div>

.beneficios{ padding: 3em 0; }

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

.lista-benficios { width: 40%; display: inline-block;

}

.imagem-celular { width: 40%; box-shadow: 10px 10px 10px;

}