Problema ao aplicar o roda pé | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

</head>
<body>
    <header>
        <h1 class="titulo-principal">Barbearia Alura</h1>
    </header>

    <img id= "banner" src="banner.jpg">
    <div class="principal">
        <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

        <p class="texto-central">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 class="texto-central"> 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-centralizado">Benefícios</h3>    

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

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

css body {

}

#banner{ width: 100% }

.principal{ background: #cccccc; padding: 30px; } .titulo-principal { padding-left: 20px; }

.titulo-centralizado { text-align: center

}

.texto-central { text-align: center; background: #cccccc

}

#missao{ font-size: 20px }

em strong { color: red; }

.itens{ font-style: italic; }

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

ul{ display: inline-block; vertical-align: top; width: 20%; margin-right: 15%; } .imagembeneficios{ width: 45% }

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

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

tentei colocar o rodapé na primeira pagina do curso e as imagens não ficaram igual a da pagina produtos. Elas ficaram desalinhadas. Gostaria de enteder o motivo