Codigo inline-block

Buenas noches, estoy tratando de achicar y centrar la imagen de diferenciales y no lo logro. Verifique en el video pero no encuentro el error.

<style>

    p{
 text-align: center;
     }
</style>

<img id="banner" src = "banner/banner.jpg">

<div class="principal">

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

    <p> Ubicada en el corazón de la ciudad, <strong>La 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 se destaca 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></em></p>

    <p>Ofrecemos profesionales experimentados, que están constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a sus clientes las nuevas tendencias en el mercado.</p>

</div>

<div class="diferenciales">

    <h2> Diferenciales</h2>
    <ul>
        <li class="items">Atencion personalizada a los clientes</li>
        <li class="items">Espacio diferencial</li>
        <li class="items">Localizacion</li>
        <li class="items">Profesionales calificados</li>
    </ul>

     <img  src ="diferenciales (1)/diferenciales/diferenciales.jpg" class="imagenDiferenciales">

</div>