[Dúvida] Problemas com o footer. Não consigo encontrar o erro

CSS

body {
    font-family: 'Montserrat', sans-serif;
}

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

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

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

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

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: #088C19;    
}

.produtos li:hover h2 {
    font-size: 34px;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

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

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

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}

form label, form legend {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padrao {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

.enviar {
    width:40%;
    padding: 15px 0;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

.enviar:hover {
    background: darkorange;
    transform: scale(1.2);
}

table {
    margin: 20px 0 40px;
}

thead {
    background: #555555;
    color: white;
    font-weight: bold;
}

td, th {
    border: 1px solid #000000;
    padding: 8px 15px;
}


/* css da página inicial */
.banner {
    width:100%;
}

.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.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;
}

.imagembeneficios {
    width: 60%;
}

.mapa {
    padding: 3em 0;
}

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

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

Tenta estabelecer uma largura para o footer:

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

Onde 'width: 100vw' significa que o footer deve ocupar 100% da largura da tela, e 'overflow: hidden' diz que se algum elemento filho do footer vazar para fora do footer, ele será cortado, por exemplo, por padrão o overflow é definido como visiable:

Definindo o 'overflow: hidden' tem-se o seguinte comportamento:

Isto é muito últil para evitar o scroll lateral, que é aquele scroll horizontal que acontece quando um conteúdo passa da largura máxima da tela, por isso é comum definimos na tag body 'overflow-x: hidden' assim o conteúdo que transbordar para as laterais será cortado/ocultado:

body {
    font-family: 'Montserrat', sans-serif;
    width: 100vw;
    overflow-x: hidden;
}

A unidade vw é muito utilizada para fazer páginas web responsivas, e faz parte do CSS moderno, significa viewport width, que leva em consideração justamente a tela do usuário, há também o vh (viewport height) para altura. Portando se você quiser que algo preencha toda largura da tela utilize width: 100vw que diz que o elemento deve ocupar 100% de largura da tela do usuário.

Obrigada pela resposta Gabriel, porém após as alterações ficou assim...

Bem estranho, sempre é bom consultar a ferramenta de desenvolvimento do navegador para ver o que pode estar causando este comportamento. Aparentemente as únicas tags que podem estar interferindo diretamente no posicionamento deste footer são as tags html, body e a própria footer, as importações parecem corretas e as propriedades CSS também. O recomendável mesmo é você talvez retornar a vídeo aula e verificar que alteração causou este comportamento, ou abrir o Devtools com o comando Ctrl+Shift+C e analisar as propriedades desta página, lá você pode remover e adicionar propriedades CSS para se ter o resultado desejável. Mas se quiser continuar, deixarei um código star killer aqui:

body {
    font-family: 'Montserrat', sans-serif;
    width: 100vw;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 430px;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
    width: 100vw;
    height: 365px;
    position: absolute;
    bottom: 0;
}

Este código força o footer a estar localizado sempre no limite do body, o que nos diz isto é a propriedade position, que no body que está como relative, e no footer como absolute, então o posicionamento do footer será absoluto de acordo com o body, bottom indica que sempre ficará na extremidade vertical inferior, e o padding-bottom é o espaçamento necessário para que o footer não se sobreponha sob o conteúdo da página.

Ps.: Eu chamo de códigos star killers, quando eu não acho a melhor solução para resolver um problema e estou preso no problema faz um bom tempo, então acabo utilizando a força bruta, que seria um código forçado e não seria a melhor solução possível para resolver o problema, mas que acaba resolvendo (tipo matar uma mosca com uma bazuca). Que é o caso, possivelmente a gente deixou um erro bobo passar e no fim ficou este comportamento no footer, as vezes é algo tão bobo que quando a gente descobre ficamos com cara de bobo sem acreditar, pelo menos comigo acontece com frequência.

Por incrível que pareça, achei este post no fórum que pode ser o mesmo problema que o seu nao-consigo-deixar-as-paginas-responsivas-ajuda-por-favor. No qual o Renan Lima diz que está faltando a tag <meta name="viewport" content="width=device-width" /> nos <head> da página.

Então se for isso, tente deixar seu head assim:

<head>
    <meta charset="UTF-8">  <!-- Inserir a códificação para permitir acentuação -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Barbearia Alura</title>

    <link rel="stylesheet" href="reset.css"> <!--Limpa a formatação do navegador, é antes do css.-->
    <link rel="stylesheet" href="style.css"> <!--Refencia ao arquivo CSS do projeto-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

Esta metatag configura e estabelece a viewport (janela de exibição), ela fornece ao navegador instruções sobre como controlar as dimensões e o dimensionamento da página.

Segundo a w3schools:

A parte width=device-width define a largura da página para seguir a largura da tela do dispositivo (que varia dependendo do dispositivo).

A parte initial-scale=1.0 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.

Normalmente estes blocos de códigos que são padrões em todos projeto, utilizamos snippets, que são basicamente construtores de bloco de códigos. No VSCode por exemplo se você digitar apenas um ponto de exclamação "!" no início de um arquivo HTML, já aparece toda esta estrutura inicial de um arquivo HTML.

Cara, por incrível que pareça continuou a mesma coisa, eu não sei que ponto da aula que isso aconteceu. Eu entendi perfeitamente suas orientações, mas quando vou aplicar tanto o "star killers", quanto a metatag permanece do mesmo jeito. Sobre ser algo simples eu já estou até esperando, não sei o que deixei passar. O jeito vai ser tentar voltar como estava antes dessa última aula :/. Valeu mesmo....

Putzzz, nem o código forçado funcionou...

Quando você terminar este curso recomendo fazer o curso de Github, que é uma plataforma onde você pode disponibilizar o código do seu projeto. É muito útil para encontrar problemas, pois outros devs poderão baixar e executar na máquina deles e assim facilita encontrar qualquer problema, além disso o Github é a ferramenta principal de repositórios de códigos na internet, lá você pode encontrar inúmeros projetos de diversos tipos.

Links úteis:

https://cursos.alura.com.br/course/html5-css3-avancando-css/task/63381 (Projeto finalizado do curso, onde você pode baixar o código e comparar com o seu)

https://cursos.alura.com.br/course/git-github-repositorio-commit-versoes (Curso de Github)

Obs.: Tô perplexo que o código star killer não tenha funcionado, pois se tivesse qualquer espaçamento indevido ali, era para o footer ignorar totalmente com o position 'absolute', ainda mais com o vídeo alinhado corretamente, significa que o body não está desalinhado, então era para alinhar corretamente relativo à ele, buguei demais aqui. Mas enfim, é como eu disse, talvez seja algo bem supérfluo que esteja dando todo este trabalho.

ola, tenta adicionar no inicio esse texto:

*{ box-sizing: border-box; }

conseguiu resolver seu problema? pois consegui achar o erro em seu código....

<main>
        <tag1></tag1>
        <tag2></tag2>
**<main>**

você na verdade nao fechou a tag main.... com isso...ele usou a prioridade e ajustou ao body. entao se vc apenas adicionar /main no lugar do ultimo main resolverá o seu problema! Abraços