Texto ao lado da imagem na div de benefícios

O código está igual a do professor, mas não está ficando ao lado. HTML

<section class="beneficios">
                <h3 class="titulo-principal">Benefícios</h3>
                <div class="conteudo-beneficio">
                    <ul class="lista-beneficio">
                        <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>
                    </ul><img src="beneficios.jpg" class="imagembeneficios">
                </div>
                <div class="video">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/lwg3ivIrVyk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </section>

CSS

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

}
.beneficios{
    padding: 3em 0;
}

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

.imagembeneficios{
    width: 60%;
}