Problema de imagen

El código parece que está ok pero no te está tomando nada del estilo de la ul, lo pudiste resolver?

No, aun no

Me paso lo mismo con los dos editores de texto sublime tex y visual estudio.

Hola, podrás poner tu código css todo de corrido para ver si hay algo extraño? Y de paso el html también

body

.principal{ background: gray; padding:20px }

h1{ text-align: center ; }

p{
    text-align: center ;

}

em strong {
    color: red ;

}

#mision{
    font :size 20px ;

} .diferenciales{ background: white; padding:30px }

h2{ 
text-align: center;

}

.items {
font-style: italic;

}

ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;

}

.imagenDiferenciales {
width: 50%;

}

este es el código css en visual estudio

!DOCTYPE html>

<charset = 8-UTF>

<img  width="100%" src = "file:///C:/Users/isabe/Downloads/banner/banner.jpg" > 

<h1>Sobre la Barbería Alura</h1>

<p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.</p>

<p id="mision"><em>Nuestra misión es:<strong>"Proporcionar autoestima y calidad de vida a nuestros clientes"</strong></p>


<p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, 
para así ofrecer a nuestros clientes las últimas tendencias.La atencion es de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p>

esto es en HTML

hola tuve el mismo problema y la solución que me dieron fue colocar la imagen fuera de el tag ul

            <h2>Diferenciales</h2>

            <ul>
                <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">Profesionales clasificados</li>




        </ul>
        <img src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">

    </div> 
    de esta manera y se solucionó

si gracias se soluciono.

Sí, es así, la imagen no forma parte de la lista. Pero lo que hace que la imagen se coloque en su lugar es el formato que le dimos a la lista, el inline-block que hace que la lista no se comporte como bloque porque ocuparía todo el espacio de la pantalla y mandaría a la imagen para abajo. Hay otro detalle y es que para que no queden espacios de más entre la lista y la imagen, deben ir juntas en el mismo renglón. Me alegro que se haya solucionado!

</ul><img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">