"hit box" dos links não corresponde ao codigo.

Olá. Concluí as atividades conforme os exercícios, mas não tinha reparado que, em algum momento da escrita do codigo, os links da barra de navegação passaram a ter alguma divergência na sua visualização. Agora, analisando o resultado final, vi que se passo o mouse em cima da palavra "home", mostra que o endereço que aquele link leva é na verdade para portfolio. Se eu subo o mouse acima da palavra "home", a área clicável continua aparecendo, e essa sim me direciona para "index.html" (referente à home) o que me fez concluir que as palavras estão sendo mostradas abaixo da sua correspondente área clicável. O código HTML segue abaixo:

    <img src="eu.jpg" alt="Foto de João da Silva">
        <aside class="navegacao-site">
            <h1> João da Silva </h1>
            <nav>    
                <ul>
                    <li><a href="index.html">Home</a> </li>
                    <li><a href="portfolio.html">Portfolio</a> </li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>

            <u1 class="icones-sociais">
                <li>
                    <a href="https://github.com/joaodasilva" class ="Github">Github
                    </a>
                </li>
                <li>
                     <a href="https://twitter.com/joaodasilva" class ="Twitter">Twitter
                    </a>
                </li>
                <li>
                    <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class ="LinkedIn">LinkedIn
                        </a>
                   </li>
              </u1>
        </aside>

O código CSS:

body {
    background-color: #F2FFFC;
    font-family: "Arial", sans-serif;
    line-height: 1.5
}

main {
    position: absolute;
    left: 0;
    width: 85%;
    padding-bottom: 80px
}

main a {
    color: #851944;

}

main div{

    padding: 30px 0;
}

div{
    margin: auto;
    width: 720px;
}

.titulo-pagina {
    font-size: 60px;
    background-color: rgb(133, 25, 68);
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    padding: 25px;
    margin: 0px;
    border-bottom: 10px solid rgb(0, 0, 0);
    text-transform: uppercase;

}

aside h1 { 
    font-style: 30px
    margin: 25px;
 }


h2 {
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 30px;
    clear: both;
    margin: 20px;
}


strong{
    font-weight: bold;

}

em{
    font-style: italic;

}


p {
    text-align: justify;
    font-family: "Times New Roman", serif;
    margin: 20px;
}

blockquote {

    background-color: #D9E5E3;
    padding: 10px;
    border: 10px solid #C2CCCA;
    width: 250px;
    margin: 0px 20px;
    box-sizing: border-box;
    border: 10px solid #C2CCCA;


}

cite {
    font-style: italic;
    float: right;
}


 .Fiat {
    float: right;
    text-justify: none;
    display: inline-block;   }

.Petrobrás {
    text-justify: none;
    display: inline-block;   
    float: left;
}



aside {
    clear: right;
    box-sizing: border-box;

}
aside a {
    padding: 20px;
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;

}
.navegacao-site {
    width: 15%;
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
    border-left: 10px solid black;
    border-bottom: 10px solid black;
    box-sizing: border-box;
    top: 300px;
    position: absolute;
    right: 0;
}

nav a{

    color: #F2FFFC;
    text-transform: lowercase;
}

li {
    list-style-type:none;
}

img {
    width:300px;
    border-left: 10px solid black;
    border-bottom: 10px solid black;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;

}

footer {
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

#rodape-pagina {
    background-color: #000000;
    color: #F2FFFC;
    margin: 0px;
    padding: 20px;

}

.icones-sociais li {

    display: inline-block;


}
.icones-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -99999px;
    box-sizing: border-box;
}

.Github {
    background-image: url(github.png);
}

.LinkedIn {
    background-image: url(linkedin.png)

}

.Twitter {
    background-image: url(twitter.png)
}