Loja de Pets Baseada no Modelo da Barbearia | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Ola, Primeiramente peço desculpas se não for permitido postar esse projeto por não ser exatamente igual ao da Aula.

Minha Namorada Vende ALguns pets para um jogo online então peguei essa ideia e resolvi fazer uma loja, Fiz uma loja de Pets baseada no modelo da Barbearia, com algumas mudanças de estilos, porem nem tudo funcionou como eu queria. Por Exemplo: Problema 1: Coloquei 3 imagens de pets para "enfeitar" o cabeçalho, mas 2 imagens não consegui ajustar totalmente dentro do cabeçalho.

Problema 2: Na pagina de produtos não consegui por nenhum efeito na lista de produtos. No exercício da barbearia Alura eu consegui, mas Nessa Loja que Criei não consegui por efeito nos produtos.

segue abaixo o link da Loja que deixei no ar usando o Code SandBox Link >>>> https://ko1ww.csb.app/index.html

Segue o Codigo:

<!DOCTYPE html>
<html>
    <head>
        <title>Produtos</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="cherry-style.css">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>
<body>
    <header>
        <img class="petimg2" src="petkb2.png">
        <img class="petimgmeio" src="petkbmeio.png">
        <img class="petimg" src="petkb.png">
        <div class="caixa">
        <h1><a href="index.html"><img src="shoplogo.png" class="imglogo"></a></h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contato.htm">Contato</a></li>



            </ul>
        </nav>
        </div>
    </header>

    <main>
        <ul class="produtos">
            <li>
                <h2>Draik Darign</h2>
                <img src="item11.png">
                <p class="descriçãoproduto">Pet Raro Não Convertido</p>
                <p class="preço">Preço  $ 200</p>
            </li>

            <li>
                <h2>Cherry Blossom</h2>
                <img src="item22.png">
                <p class="descriçãoproduto">Costumieze Seu Pet</p>
                <p class="preço">Preço $ 30</p>
            </li>

            <li>
                <h2>2000 NC Cards</h2>
                <img src="item33.jpg">
                <p class="descriçãoproduto">Nc's Para Sua conta</p>
                <p class="preço"> Preço $ 11</p>

            </li>

            <li>
                <h2>Neo <br> Points</h2>
                <img src="item44.png">
                <p class="descriçãoproduto"> Pacote com 1000 NP's</p>
                <p class="preço"> Preço $ 11</p>

            </li>
        </ul>

    </main>
    <footer>
        <img src="shoplogo.png">
        <p class="copyright"> &copy;Copyright Cherry Shop - 2020</p>

    </footer>
</body>
</html>insira seu código aqui

Segue o Css da pagina produtos:*




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

.produtos h2{
    font-size: 30px;
    font-weight: bold;
    color: #00FF00;
}


.produtos li{
    display: inline-block;
    text-align: center;
    width: 20%;
    vertical-align: top;
    margin: 0 2%;
    padding: 30px 20px;
    box-sizing: border-box;
    border:3px dashed #7CFC00;
    border-radius: 10px 40px;

}


.produtos li:hover h2 {
    font-size: 34px;
}
.produtos li:hover {
    border-color:  #FF4500;

}

.produtos li: active{

}

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


}

.descriçãoproduto{
    font-size: 18px;
    font-weight: bold;
    color: #00FF00;

}

.preço{
    font-size: 22px;
    font-weight: bold;
    color: #98FB98;
    margin-top: 10px;
}

.

Segue o css principal

header {
    background-image: url(cloud.jpg);
    padding: 2px 0;


}

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

.petimg{
    position: absolute;
    padding: 50px 0 50px 50px;
}

.petimgmeio{
    position: absolute;
    padding: 0px 0 0 600px;
}

.petimg2{
    position: absolute;
    padding: 0px 0 500px 1250px;
}

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

nav li{
    display: inline;
    padding: 0 0 0 15px;

}    

li a{
    font-weight: bold;
    font-size: 25px;
    text-transform: uppercase;
    position: relative;
    text-decoration: none;
    color:  #FF00FF;

}

nav a:hover{
    color:#FF0000;
    font-size: 27px;
    text-decoration: underline overline dotted blue;
}


main{
    background-image: url(snowing.jpg);
    align-content: center;

}

.titulomain {
    font-size: 35px;
    text-align: center;
    margin:  20px;
    padding: 10px;
    color: #00FF00;
}

main p{
    display: block;
    font-size: 28px;
    text-align: center;
    padding: 5px;
    color: #00FF00;
}

.imgmain{
    width: 100%;
    height: 500px;
    display: inline-block;
    padding: 5px 0;


}


footer{
    background-image: url(Bystars.png);
    text-align: center;
    padding: 30px 0 0


}

.copyright{
    color: red;
    font-weight: bold;

}

Mergulhe em programação