Não consigo separar lista da imagem

Depois de colocar lista e imagem lado a lado, agora não consigo separar, pois estão grudados.

<h3 class="titulo-principal">Benefícios</h3>

                <div class="conteudo-beneficios">
                        <ul class="lista beneficios">
                        <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>
                        <li class="itens">Pontualidade</li>
                        <li class="itens">Linpeza</li>
                    </ul><img src="Beneficios.jpg" class="imagem-beneficios">
                </div>

.beneficios { padding: 3em 0; }

.conteudo-beneficios { display: flex; width: 640px; margin: 0 auto; }

.lista-beneficios { width: 40%; display: inline-block; vertical-align: top; }

.imagem-beneficios { width: 60%; }

.itens { line-height: 1.5; }

.itens:first-child { font-weight: bold; }