lista ao lado da imagem

não estou conseguindo colocar a lista de beneficios ao lado da imagem.

<section class="beneficios">
    <h3 class="titulo-principal"> Beneficios</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">Pontualidade</li>
            <li class="itens">Limpeza</li>
    </ul><img src="beneficios.jpg"class="imagem-beneficios">
    </div>
    <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
        </section>

CSS

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

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

.itens {
line-height: 1.5

}

.imagem-beneficios {
    width: 60%;
    margin: 0 20px 20px 0;

}