exercicio finalizado | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

Depois de horas mexendo em medidas que quando alterava do index para o produto, o logo, o nav e o botão se moviam, o que era visível que tinha erros nas medidas no css do index.html. Finalmente finalizei.

Tem um espacinho safado entre a imagem dos benefícios e o rodapé que não consigo tirar de maneira nenhuma.

HTML

<!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>
            <div class="caixa2">

                <button class="btlogin" onclick="window.location.href = 'http://google.com.br'">Login</button>

            <div class="caixa">

                <h1><a href="http://google.com.br"><img src="imagem/logo.png" class="imglogo"></h1>

                <!-- Organizar Dar Trabalho! -->

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

            </div>

            </div>    
        </header>

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

            <div class="apresentacao">
                <h2 class="titulo2">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 <strong>Barbearia Alura</strong> 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="titulo3">Beneficios</h3>

                <ul class="lista">
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaços Diferenciados</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>

                <img  class="imgbeneficios" src="beneficios.jpg">

            </div>
        </main>

        <footer>
            <img src="imagem/logo-branco.png">
            <p class="copyright">© Copyright Barbearia - 2021</p>
        </footer>

    </body>    
</html>

CSS

header
{
    background: #bbbbbb;
    width: 1903px;
    padding: 20px 0px;
}

.caixa2
{
    position: relative;
    width: 940px;
    padding: 0 50em 0 0;
    margin: 0px auto;
    /*border: solid;*/

}

.btlogin
{
    position: absolute;
    display: inline;
    left: 85%;
    top: 42.4%;
    width: 120px;
    height: 50px;
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    background: #cccccc;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.caixa
{
    position: relative;
    width: 1035px;
    margin: 0 auto;
    border: solid;
}

nav
{
    position: absolute;
    top: 50%;
    right: 0%;
    text-align: center;
    border: solid;
}

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

nav a
{
    text-transform: uppercase; /* Muda a forma do texto. Ex: Maiúsculo, Minúsculo */
    color: #000000; /* Muda a cor do texto */
    font-weight: bold; /* altera o peso ou intensidade da fonte. Ex: Negrito,Normal */
    font-size: 20px; /* altera o tamanho da fonte */
    text-decoration: none; /* remove decoração do texto */
}

nav a:hover
{
    color: #add8e6;
}

.apresentacao
{
    background: #cccccc;
    padding: 30px;
    width: 1843px;
}

.banner
{
    width: 1903px;
    margin: 0 0 -2px 0;
}

.titulo2
{
    text-align: center;
}

p
{
    text-align: center;
    margin: 1%;
}

#missao
{ 
    font-size: 20px;
}

em strong
{
    color: #ff0000;
}

.beneficios
{
    /*border: solid;*/
    background: #cccccc;
    padding-top: -200px;

}

.titulo3
{
    width: 200px;
    margin: 0 0 0 2.42%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    text-transform: uppercase;
    font-weight: bold;
}

.lista
{
    display: inline-block;
    vertical-align: top;
    width: 10.6%;
    margin-top: 21.5%;
    margin-left: -10%;
    text-align: justify-all;
    list-style-type: none;
}

.itens
{
    font-style: italic;
    font-weight: bold;
    padding: 10px 0 0px 0;
}

.imgbeneficios
{
    width: 86%;
}

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

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

Mergulhe em programação