Na hora de inserir o gradiente minha vida acabou... | HTML5 e CSS3 parte 4: avançando no CSS

Então estava lá feliz e contente na aula até que o profº falou " tira o

width: 940px;
    margin: 01em auto;

da Tag main".

Ai bagunçou tudo. (meus CSS estão separados, cada HTML tem o seu) alguns erros eu até consegui resolver. Agora a maldita da imagem dos utensílios não fica no lugar. vou colocar os códigos aqui. socorro!

index



<body>
    <header>
        <div class="box">
            <h1><img src="banner/imagens/logo.png" alt=""></h1>       


            <nav>
                <ul class="navegacao">
                    <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>
    </header>

    <img class="banner" src="banner/banner.jpg" alt="imagem da Barbearia">
    <main>
        <section class="principal">
            <h2 class="tit-principal">Sobre a Barbearia Alura</h2>

            <img class="utensilios" src="banner/utensilios.jpg" alt="utensilios de um barbeiro">

            <p>Localizada no coração da cidade a <b>Barbearia Alura</b> 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 class="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>
        </section>

        <section class="mapa">
            <h3 class="tit-principal">Nosso Estabelecimento</h3>
            <p class="mapa-conteudo">Nosso estabelecimento está localizado no coração da cidade</p>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d116982.21211524727!2d-46.69944130154829!3d-23.615300237132043!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1622325215411!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </section>

        <section class="beneficios">
            <h3 class="tit-principal">Benefícios</h3>

            <div class="conteudo-beneficios">
                <ul class="lista-beneficios">
                    <li class="itens">profissionais qualificados</li>
                    <li class="itens">atendimento aos clientes</li>
                    <li class="itens">espaço diferençiado</li>
                    <li class="itens">pontualidade</li>
                    <li class="itens">localização</li>
                    <li class="itens">Limpeza</li>
                </ul><img src="banner/beneficios/beneficios.jpg" class="imagem-beneficios">
            </div>

            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </section>

    </main>

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

</body>

</html>

style

/*navegação*/
body{
    font-family: 'Montserrat', sans-serif;
}
header{
    background-color: lightgrey; 

}
/*main{
    position: relative;
    width: 940px;
    margin: 0 auto; 
}*/

.box {
    position: relative;
    width: 940px;
    margin: 0 auto;
}
nav{
    position: absolute;
    top: 110px;
    right: 0%;
}

.navegacao li {
    display: inline;
    margin: 0 0 0 15px;  

}

nav a {
    text-transform: uppercase;
    color: black; 
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;   
}

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

/*Banner*/
.banner{
    width: 100%;
}

/*Sobre*/
.princioal{
    padding: 3em 0;
    background: #FEF