O meu não está alcançando a tela inteira do celular

Fala ai Guilherme, tudo bem? Precisa entender o motivo de não estar pegando a tela inteira, talvez esteja faltando aplicar um width: 100% no seu elemento.

Ou a medida que você está aplicando não bate com as especificações do celular.

Espero ter ajudado.

Pode dar uma olhada, por favor?

/* css da página inicial */
body {
    font-family: 'Montserrat', sans-serif;
}

.banner {
    width: 100%;
}

.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
    color: rgba(0,0,0,1.0);
}

/*
text-shadow: 2px 2px #AAAAAA;

.titulo-principal:first-letter {
    font-weight: bold;
}

.titulo-principal:before {
    content: "[ "
}

.titulo-principal:after {
    content: " ]"
}

p:first-line {
    font-style: italic;
}

main > p {
    background: red; 
}

img + p { 
    balckground: blue;

img ~ p {
    background: yellow
}

.principal p:not(#missao) {
    background: orange;
}
*/

.principal {
    padding: 3em 0;
    background: #FEFEFE width: 100%; 
    width: 940px;
    margin: 0 auto;
}

.principal p {
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888);
}

.mapa-conteudo {
    width: 940px;
    margin: 0 auto;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.beneficios {
    padding: 3em 0;
    background: #888888;
}

.conteudo-beneficios {
    width: 640px;
    margin: 0 auto;
    display: flex;
}

.lista-beneficios {
    width: 640px;
    display: inline-block;
    vertical-align: top;
}

.itens {
    line-height:  1.5;
    text-align: left;
    margin: 0 15px;
    font-weight: bold;
}

.itens:before {
    content: "★"
}

/*
.itens:first-child {
    font-weight: bold;
}

.itens:nth-child(2n) {
    font-weight: bold;
}

box-shadow: 10px 10px 30px 20px #000000, -10px -10px yellow, -20px 20px rgba(255,0,0,0.2);
*/

.imagem-beneficios {
    width: 100%;
    opacity: 1;
    transition: 400ms;
    box-shadow: 10px 10px 10px 0 #000000;
}

.imagem-beneficios:hover {
    opacity: 0.3;
}

iframe {
    margin: 0 0 2em;
}

.video {
    width: 560px;
    margin: 2em auto;
}

*/css dá página mobile*/
@media screen and (max-width: 480px) {

    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video  {
        width: auto;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
        font-size: 15px;
        font-weight: bold;
    }

    .lista-beneficios, .imagem-beneficios {
        width: 100%;
    }
}

Fala Guilherme, tentar descobrir o problema apenas olhando o código é bem complicado, posso deixar pequenos detalhes passarem facilmente.

Consegue compartilhar o projeto completo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Boa noite, sou novato aqui, porém quero muito ajudar com o pouco de conhecimento que eu tenho, no caso do css para mobile acredito que a resolução em px que vc colocou foi muito baixa, por exemplo o que difere de um monitor full hd para uma tela de smartphone full hd é a orientação de tela, logo o monitor funciona na resolução 1920x1080@60hz e o do smartphone 1080x1920@60hz tenta pôr o width em 1080px e manda um feedback.

Ainda não consegui, o link do meu código:

https://drive.google.com/drive/folders/1VUljBQD3LlqdpT_LAxNWrl0WaizWsCq6?usp=sharing

Fala Guilherme, tentei fazer o download mas preciso de acesso, acabei de solicitar.

Abraços.

https://drive.google.com/drive/folders/1VUljBQD3LlqdpT_LAxNWrl0WaizWsCq6?usp=sharing Podem dar uma olhada, por favor?