Pagina web berberia alura

HTML


        <header>
            <h3 class="titulo-principal">Barbería Alura</h3>
        </header>

        <div class="img_banner">
            <img src="banner.jpg" class="banner" alt="">
        </div>

       <div class="principal">
        <h1 style="text-align: center;">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 style="font-size: 20px"><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 nuestros clientes las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p> 


        <h2>Diferenciales</h2>
       </div>



       <div class="diferenciales"> 

        <ul class="lista">
            <li class="items">Atencion alos clientes</li>
            <li class="items">Espacio diferncido</li>
            <li class="items">Localizacion</li>
            <li class="items">Personales Calificados</li>
        </ul>

        <div class="img_diferenciales">
            <img src="diferenciales.jpg">
        </div>

    </div>

CSS

body{
    background: #333

}

header h3{
    font-size: 3em;
    text-align: center;
    color: #fff;
    padding: 20px;
}

.principal{
    padding: 30px;
    text-align: center;
}

h1{
    text-align: center;
    padding: 20px 0;
    color: #fff;
}

.img_banner{
    text-align: center;

}

.img_banner img{
    width: 100%;
    height: 60%;
}

strong{
    color: #000;
}

p{
    text-align: center;
    margin: 20px ;
    color: #fff;
}

.principal h2{
    font-size: 2em;
}

.diferenciales{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.lista{
    margin-top: -270px;

}



.items{
    font-style: italic;
    list-style: none;
    color: white;
} 


.img_diferenciales img{
    width: 600px;
    padding: 20px 30px;
}