[Solucionado] Projeto de site finalizado | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Pessoal, decidi fazer um site de uma loja de video games nos mesmo moldes do curso. Aqui está o site finalizado. Espero que gostem. site Linha de código para quem se interessar:

<!DOCTYPE html>
<html>
<head>
    <title>Game Store</title>
    <link rel="stylesheet" href="produtos1.css">
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <header>
        <div class="caixa">
            <h1><img src="logo1.png"></h1>
            <nav>
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                    <li><a href="login.html">Login</a></li>
                </ul>
            </nav>
        </div>
</header>
<main>
        <div>
            <ul class="produtos">
                <li>
                    <h2>Playstation</h2>
                    <img src="playstation.png">
                    <p class="plataforma">Consoles e jogos para Playstation 4 & 5</p>
                    <p class="consulte">Consulte</p>
                </li>
                <li>
                    <h2>Xbox</h2>
                    <img src="xbox.png">
                    <p class="plataforma">Consoles e jogos para Xbox One e Series X/S</p>
                    <p class="consulte">Consulte</p>
                </li>
                <li>
                    <h2>Nintendo</h2>
                    <img src="nintendo.png">
                    <p class="plataforma">Consoles e jogos para Nintendo Switch</p>
                    <p class="consulte">Consulte</p>
                </li>
            </ul>
            <ul class="produtos2">
                <li>
                    <h2>PC Gamer</h2>
                    <img src="pc.png">
                    <p class="plataforma">Tudo para seu PC Gamer</p>
                    <p class="consulte">Consulte</p>
                </li>
                <li>
                    <h2>Manutenção</h2>
                    <img src="manutencao.png">
                    <p class="plataforma">Manuntenção de PC e Consoles</p>
                    <p class="consulte">Consulte</p>
                </li>
                <li>
                    <h2>Acessórios</h2>
                    <img src="controle.png">
                    <p class="plataforma">Acessórios para seu PC e Console</p>
                    <p class="consulte">Consulte</p>
                </li>
             </ul>
        </div>
    </main>
    <footer>
        <img src="logo-branco.png">
        <p class="copyright">&copy: Copyright Barbearia Alura</p>
        <p class="agradecimento">Esse site é um teste e foi feito graças a ajudas do time da Alura, como agradecimento foi colocado o logo da aula nesse rodaapé.</p>
    </footer>
</body>

</html>

header {
    background: #456CAF;
    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: #DBE4F4;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}
nav a:hover {
    color: #C82058;
    text-decoration: underline;
}
main {
    background-color: #B99918;
}
.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}
.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: auto;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos2 {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}
.produtos2 li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: auto;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}
.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}
.produtos2 h2 {
    font-size: 30px;
    font-weight: bold;
}
.plataforma {
    font-size: 18px;
}
.consulte {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}
.produtos li:hover {
    border-color: #1E7611;
}
.produtos li:active {
    border-color: #B22015;
}
.produtos li:hover h2 {
    font-size: 34px;
}
.produtos2 li:hover {
    border-color: #1E7611;
}
.produtos2 li:active {
    border-color: #B22015;
}
.produtos2 li:hover h2 {
    font-size: 34px;
}
footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}
.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0;
}
.agradecimento {
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: underline;
}