No funciona display: inline-block

Buenas tardes, he realizado varias veces todo lo que nos explica el video y la imagen queda debajo de la lista. Alguien que me ayude, por favor!!!!

            <h3 class="titulo-principal">Diferenciales</h3>

            <div class="contenido-diferenciales">

                <ul class="lista-diferenciales">
                    <li class="items">Atención personalizada a los clientes</li>
                    <li class="items">Espacio diferenciado</li>
                    <li class="items">Localización</li>
                    <li class="items">Profesesionales calificados</li>
                    <li class="items">Puntualidad</li>
                    <li class="items">Limpieza</li>
                </ul><img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">
            </div>         

        </section>

        En CSS:

        .contenido-diferenciales{
width: 640px;
margin: 0 auto;

}

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

.items{
    line-height: 1.5;
}

.imagen-diferenciales{ width: 60%; }

Así se visualiza en el navegador