Erros na página

Segue meu style.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 li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    padding: 50px 0;
    background: #CCCCCC;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border-color: #000000;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
}
.produtos li:hover{
    border-color: C78C19;
}
.produtos li:active{
    border-color: #088C19;
}
.produtos{
    width: 940px;
    margin: 0 auto;
}
.produtos h2{
    font-size: 30px;
    font-weight: bold;
}
.produto-preco{
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0 0;
}
.produto-descricao{
    font-size: 18px;
}
.produtos li: hover h2{
    font-size: 40px;
}
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;
}
.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;
}
.imagembeneficios{
    width: 60%;
}
.utensilios{
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}
.mapa{
    padding: 3em 0;
}
.mapa p{
    margin: 0 0 2em;
    text-align: center;
}

Olá Alessandra, tudo bem?

Ao analisar o código, percebi que existiam algumas diferenças entre o seu código e o código do modelo da aula. Vamos verificar!

Arquivo HTML

1º Parte: tag âncora página de contatos

Quando abri o arquivo index.html, notei que toda o conteúdo de texto da página estava se comportando como se fosse um link e em qualquer lugar que fosse clicado, era direcionado para a página de contatos.

Isso ocorre porque logo no início do arquivo, a tag <a> não estava sendo fechada e quando isso ocorre, todas as linhas seguintes ficam comprometidas.

Como está:

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="produtos.html">Produtos</a></l
    <li><a href="contato.html">Contato</li> <!--tag a não está sendo fechada-->
</ul>

Modificando, o código ficará assim:

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

2º Parte: imagem dos benefícios

Nesse ponto, há um erro de escrita na tag <img> da imagem referente aos benefícios e a tag também não está sendo fechada.

Como está:

 <img src="beneficios.jpg class="imagembeneficios"

Modificando o código:

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

Arquivo CSS

3º Parte: espaço no hover

Em dois locais no CSS que está sendo utilizado o hover, há um espaço extra que faz com que as propriedades declaradas não sejam aplicadas.

Como está:

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

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

Modificando o código:

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

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

Após fazer todas as modificações, esse será o resultado final:

Esses foram os erros que encontrei, uma dica que tenho é que sempre que o seu projeto se apresentar diferente do modelo do professor, em qualquer curso que estiver, você primeiramente baixar o projeto da aula e conferir linha a linha comparando com o seu código, isso é umas das formas que nos auxilia a encontrar onde está o erro.

Caso queira fazer isso agora, você pode baixá-lo diretamente poraqui.

E uma outra recomendação que tenho, é se caso você não esteja usando o VS Code como ambiente de desenvolvimento ainda, passe a utilizá-lo! Ele é ótimo para sinalização de erros no código e conta com 2 extensões que podem te ajudar muito, são elas:

• Beautify: Ao teclar Ctrl + B faz com que o seu código seja indentado automaticamente, melhorando a legibilidade do código.
• EsLint: Identifica e corrige automaticamente erros de sintaxe no código.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!