Fiz como mostrado no vídeo, porém as imagens dos links continuam cortadas. Como resolver?

        <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>

            <ul class="icones-sociais">
                <li><a class="github" href="https://github.com/git-joaodasilvahttp://github.com/joaodasilva">Github</a></li>
                <li><a class="twitter" href="https://twitter.com/twitter-joaodasilva">Twitter</a></li>
                <li><a class="linkedin" href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508">LinkedIn</a></li>
            </ul>
        </aside>

bio.html

.icones-soiais a{
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    display: inline-block;
}

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

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

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

site.css