O fundo não fica cinza e a letras não mudam a formatação. Alguém pode me ajudar a encontrar o erro?

Ja troquei de navegador, mas o erro continua o mesmo

<!DOCTYPE html>

<html  lang="pt-br">

<head>

<meta charset="UTF-8">
<title> Produtos-Barbearia Alura </title>
<link rel="-stylesheet" href="produtos.css">

</head> 

<body>
<header>
    <h1><img src="alura-logotipo.jpg"> </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> 
</header>

</body>

</html>

header {
    background: grey;
}

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

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