HTML Y CSS | Alura Latam - Cursos online de tecnologia

Para practicar he desarrollado este pequeño proyecto, no sé si está bajo buenas prácticas, pero fue chevere Experiencia: Sufrí mucho al intentar cuadrar el main, Tambien sufrí con el footer porque no se quedaba fijo, Así traté de solucionarlo, Me gustaria recibir críticas constructivas, para que entre todos podamos aprender

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mascotas</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <Header>
        <div class="caja">
            <img class="img-main" src="./img/huella.png" alt="">
            <h1>Mi amigo perruno</h1>

            <nav>
                <ul >
                    <li type="none">Home</li>
                    <li type="none">Productos</li>
                    <li type="none">Contacto</li>
                </ul>
            </nav>
        </div>
    </Header>

    <main>

            <div class="caja-main">
                <p class="slogan-main">El perro es el mejor amigo del hombre</p>
                <img class= "imagen-main" src="../Practica_1/img/Imagen main.jpg" alt="imagenDog">
            </div>
    </main>


    <footer>
        <p class="copyrigth"> &copy My Friend</p>
    </footer>
</body>
</html>

CSS

header{
    background-color: #cccccc;
}

.caja{
    width: 940px;

    position: relative;
    margin: 0 auto;
    padding: 20px 0;
}

.img-main{
    width: 150px;
    height: 150px;
}

header h1{
    display: inline;
    position: absolute;
    margin-left: 20px;
    top: 76.5px;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;

}

header nav{
    position: absolute;
    right: 0;
    top: 76.5px;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;


}

/* MAIN */


main{
    width: 100%;
    height: 100%;
}

.caja-main{
    position: absolute;
    width: 100%;
    padding: 10px;
    top: 37%;  

}

.slogan-main{
    display: inline;
    position: absolute;
    margin-left: 200px;
    top: 50%;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.imagen-main{

    display: block;
    margin-left: 70%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    right: 20px;

}




footer{
    position: absolute;
    width: 100%;
    height: 40px;
    text-align: center;
    background-color: #cccccc;
    bottom: 0px;

}

footer p{
    margin-top: 13px;
}