Olá, Alysson. Como vai?

De acordo com o projeto no h1 a logo é a de cor preta. <h1><img src="logo.png"></h1>. Mas se quiser manter a de cor branca fica a seu critério.

A imagem do banner é aplicado após o fechamento do header:

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

Sobre o alinhamento dos itens da lista, testei o código que você enviou e os itens ficaram alinhados um ao lado do outro. Pode conferir novamente se esse problema persiste por gentileza?

Fico aguardando seu retorno. :)

Opa Luan, boa tarde. Bem e você como vai?

Testei novamente o código e não obtive sucesso, reescrevi do zero em outro HTML e construí novamente o CSS mas também esbarrei no mesmo "erro".

O que achei de diferente é quando uso Reset.css no head da minha página home, ele quebra todo o meu código abaixo:

    <div class="principal">
            <h1>Sobre a Barbearia Alura</h1>

            <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">
        <h2>Benefícios</h2>

        <ul>
            <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="../Imagens/beneficios.jpg" class="imagembeneficios">
    </div>

Acredito não ter correlação, mas fiquei intrigado.

Olá, Alysson. Como vai?

O código ficou diferente quando você aplicou o reset.css porque o navegador tem formatação por padrão, que atrapalha quando criamos algum layout. O reset.css serve para retirar essa formatação, o ideal é sempre aplicá-lo logo no início da criação do projeto. Tem esse artigo bem legal aqui na Alura falando sobre o que é o reset.css.

Existem dois arquivos CSS linkados no projeto, pode me passar o código dos dois por favor? Talvez o outro que ficou faltando está aplicando alguma estilização no li do header.

Fico aguardando seu retorno! :)

Oi Alysson, eu tive o mesmo problema e consegui resolver, testa se no seu vai funcionar e me fala depois...

Esse UL do header

• Home
• Produtos
• Contato

Entrou em conflito com esse ul dos benefícios ( <ul>
        <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>

Se seu css da home foi igual ao do instrutor deve ter em algum momento essa parte ul { display: inline-block; vertical-align: top; right margin: 15%; width: 30% }

O que eu fiz foi criar uma classe pro UL dos benefícios e mudar no css.

Ex: HTML: <ul class="listaBeneficios">
        <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>

CSS: .listaBeneficios{
    display: inline-block;
    vertical-align: top;
    right margin: 15%;
    width: 30%
}