Refiz o primeiro programa, pra quem tiver interesse | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Fiz o exercício proposto de melhorar a página do primeiro curso.

Segue o código para quem estiver fazendo poder pegar ideias e caso alguém queira sugerir alguma melhoria!

<!DOCTYPE html>
<html lang="pt-br">

    <head>

        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">

    </head>

    <body>

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

        <main>

            <div class="fundo-principal">
                <div class="principal">

                    <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

                    <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                    <p><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

                    <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>

                </div>
            </div>

            <div class="cor-beneficios">
                <div class="beneficios">

                    <h3 class="titulo-centralizado">Benefícios</h3>

                    <ul class="itens">

                        <li>Atendimento aos clientes</li>
                        <li>Espaço diferenciado</li>
                        <li>Localização</li>
                        <li>Profissionais qualificados</li>

                    </ul>

                <img src="beneficios.jpg" class="imagem-beneficios">

                </div>
            </div>
        </main>

        <footer>
            <img src="logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2021</p>
        </footer>


    </body>


</html>

header { background: #825B53; }

.fundo-principal { background: #825B53; margin: 0; padding-bottom: 20px; padding-top: 20px;

}

.principal { position:relative; width: 940px; margin: 0 auto; }

#banner{ width: 100%; }

.titulo-principal{ padding-left: 20px; }

.titulo-centralizado{ text-align: center; padding: 10px; margin-bottom: 30px; font-size: 40px; font-weight: bold; font-family: cursive; }

.cor-beneficios { background: #FFFFFF }

.beneficios{ background: #FFFFFF; position: relative; width: 940px; margin: 30px auto;

}

.principal p { text-align: center; margin: 30px 0 30px 0; padding: 10px; font-family: cursive; }

.itens{ font-style: italic; font-weight: bold;

}

ul{ display: inline-block; vertical-align: top; width: 30%; padding-top: 30px; margin-top: 30px; margin-right: 5%; margin-bottom: 90px; }

.itens li { padding: 15px; margin: 15px; border: 2px solid #000000; border-radius: 5px; }

.imagem-beneficios{ width: 60%; float: right; }

footer { text-align: center; background: url(bg.jpg); padding: 40px 0; }

.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }