Alguém consegue me ajudar por favor? Ele não centraliza como na aula.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Alguém consegue me ajudar por favor? Ele não centraliza como na aula.
Olá Beatriz.
Você conseguiria compartilhar como está seus arquivos produtos.html e produtos.css para facilitar a identificação do problema?
Uma imagem de como está sendo apresentado no seu navegador também ajudaria.
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="produtos.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
</body>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; }
O Cabecalho fica assim...
Olá, Beatriz! Tudo bem com você? Você baixou o arquivo de reset.css e inseriu no seu projeto?
Vou deixar aqui o código completo:
produtos.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="produtos.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>produtos.css
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;
}Não esqueça também de copiar o arquivo reset.css para a pasta raiz do projeto, somente assim o navegador irá encontrar o caminho para resetar as configurações.
Você pode baixar o arquivo reset.css aqui nesse link do curso: https://cursos.alura.com.br/course/html5-css3-posicionamento-listas-navegacao/task/59120
Sugiro também que você utilize o navegador google chrome atualizado para visualizar as modificações, você poderá baixá-lo aqui: Link para Download do Google Chrome
Espero que tenha ajudado, fico à disposição!
Um abraço e bons estudos!
Boa noite Camila, Todos os arquivos foram baixados e o meu código apesar de estar exatamente como o que foi mencionado, eu copiei o que foi informado e tentei novamente, porém o navegador continua da mesma forma.
Tenho uma pasta com todos os arquivos salvos, isso está incorreto? 
Preciso de uma solução, pois está impossível e estou quebrando a minha cabeça com isso desde ontem :(
Oi oi, Beatriz!
Entendo perfeitamente pelo que você está passando e sinto muito, esse tipo de situação com bugs e problemas são bem comuns na rotina do desenvolvedor e realmente tiram nossa paciência (às vezes é só um ; ou uma tag no lugar errado que quebra o código inteiro). Mas vamos lá, porque o sucesso é construído através da persistência :D
Observei que seu código não possui mesmo nenhum problema, conferi várias vezes e não identifiquei o erro, e também testei o código que postei aqui antes de enviá-lo. Dessa forma, um bom caminho é fazer alguns testes para saber se o problema é local ou no código mesmo:
Limpar dados de navegação No Chrome
1. No computador, abra o Chrome.
2. No canto superior direito, clique em Mais Mais.
3. Clique em Mais ferramentas e Limpar dados de navegação.
4. Na parte superior da tela, escolha um intervalo de tempo. Para excluir tudo, selecione Todo o período.
5. Marque as caixas ao lado de "Cookies e outros dados do site" e "Imagens e arquivos armazenados em cache".
6. Clique em Limpar dados.
.
Observações:
Observe atentamente os passos e informe os resultados aqui, tá bem?
Fico no aguardo e desejo que consiga solucionar o problema.
Um abraço e até breve!
Camila, fiz os testes, com o do professor fica todo desconfigurado e o meu permanece do mesmo jeito, estou utilizando o sublime text, igual ele utiliza na aula, tentei em outros navegadores, e nada também :(
Oi, Beatriz! Vamos lá?
Tenho dois pontos de atenção:
Fico no aguardo!
Até breve!
Bons estudos!
Camila, versão 93.0.4577.63 e as pastas do projeto 1 e 2 estão separadas.
Oi oi, Beatriz! Vamos lá!
Tente atualizar o seu navegador e baixar novamente o projeto do instrutor em um local separado. Depois disso você não precisa abrir o projeto pelo sublime ou vscode. Apenas clique no index.html e no produtos.html para abrir e visualizar se a página de produtos.html aparece centralizada, tudo bem?
Link para Download do projeto centralizado
Fico no aguardo!
Não dá certo de jeito nenhum!
A Camila foi muito solicita comigo e não desistiu de me auxiliar aqui no fórum, muito obrigada pela disposição. Com alguns ajustes e persistência o problema foi resolvido. Nota mil pra ela! Muito grata!!!!!!!
Estou muito feliz que vou poder prosseguir com o meu curso.