Não funcionou como o do exercício

Olá,

Fiz o exercício mas não funcionou como esperado. No meu resultado as legendas aparecem mas o links ficam sobrepostos à imagem das redes sociais.

HTML
<aside class="navegacao-site">
            <h1>João da Silva</h1>    
            <nav class="links-navegacao">
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="portifolio.html">Portifolio</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>
            <ul class="icones-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva" data-tooltip="Veja meus projetos opensource">
                       Github
                    </a>    
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva" data-tooltip="Siga-me no Twitter">
                        Twitter
                    </a>    
                </li>
                 <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joao-da-silva/32/4/508" data-tooltip="Veja meu currículo">
                        LinkedIn
                    </a>    
                </li>
            </ul>
        </aside>

CSS
.icones-sociais a {
    width: 40px;
    height: 40px;
    display: inline-block;
    font-size: -99999px;
    position: relative;
}

.icones-sociais a:hover::after {
    content: attr(data-tooltip);
    color: #FFF;
    background-color: #000;
    position: absolute;
    top: 100%;
    right: 0;
    text-indent: 0;
    font-size: .75em;
    width: 300%;
}

Não estou entendendo o que deu errado! Por favor me ajudem!