Depois de algum sofrimentos, consegui alterar o index, e fiquei bem feliz com o resultado... mas fiquei com uma dúvida: o <strong> aplicado em "Barbearia Alura" no HTML e o <em> aplicado no parágrafo seguinte, tbm no HTML, não aparecem na pagina finalizada. Alguém pode me dizer onde ratiei? Fora isso, fiquei bem feliz com o resultado. Segue abaixo o HTML e o CSS. Abração. HTML:

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

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

        <div class="principal">

            <h2 class="titulo-sobre">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 id="missao"><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 class="beneficios">
                <h3 class="titulo-beneficios">Benefícios</h3>

            <ul class="itens-list">
                <li class="itens">Atendimento aos clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais qualificados</li>
            </ul>

            <img src="beneficios.jpg" class="imagembeneficios">
        </div>
    </main>
    <footer>
            <img src="logo-branco.png">
            <p class="copyright">© Copyright Barbearia Alura - 2019</p>
    </footer>
</body>

CSS header{ background: #BBBBBB; padding: 20px 0; }

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

nav{ position: absolute; top:110px; right:0; }

nav li{ margin: 0 0 0 15px; display: inline; }

nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover{ color:#C78C19; text-decoration: underline; }

#banner{ width: 100%; }

.principal{ background:#CCCCCC; padding: 20px; }

.titulo-sobre{ text-align: center; font-weight: bold; font-size: 30px; padding: 5px 0; }

p{ text-align: center; font-size: 18px; }

#missao{ font-size:20px;

}

em strong { color: #FF0000; font-weight: bold; }

.beneficios{ background: #FFFFFF; padding: 20px; }

.titulo-beneficios{ text-align: center; font-weight: bold; font-size:25px; padding-bottom: 20px; }

.itens{ font-style: italic; font-size: 25px; text-align: left; line-height: 50px; }

.itens-list li:hover{ color: #C78C19; font-size: 28px; text-decoration: underline; }

.imagembeneficios{ width: 50%; height: 290px; }

.itens-list{ display: inline-block; vertical-align: top; width: 24%; margin-right: 15%; border: 2px solid #000000; border-radius: 10px; padding: 40px 50px; }

.itens-list:active{ border-color: #088C19; }

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

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