inline-block deixou de funcionar de maneira correta | HTML5 e CSS3 I: Suas primeiras páginas da Web

Boa tarde. Eu estou acompanhando o curso, e estou fazendo meu próprio layout em html e css para uma página pessoal. Mas os links das redes sociais nos ícones deixaram nesse ponto do curso de ficarem lado a lado. O que há errado?

main h1{
    text-transform: uppercase;
    font-size: 40px;
    background-color: rgb(200,0 , 0);
    color: rgba(255, 255, 255, 0.863);
    text-align: center;
    font-family: "Open Sans Condensed";
    margin: 0px;
    padding: 15px;
    border-bottom: 10px solid black;
}
main div{
    width: 720px;
    margin: auto;
}
main{
    line-height: 1.5;
}   

ul{
    color: black;
}

ul li a{
    color: inherit;
}

h2{
    font-size: 30px;
    font-family: "Crimson Text";
}
aside{
    border-top: 10px solid rgb(0, 0, 0);
    margin-top: 10px;
    padding: 20px;
    background-color:rgb(200,0 , 0);
    color: #F2FFFC;
    text-align: center;

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

.redes-sociais a {
    display: inline-block;
    text-indent: -90000px;
    width: 40px;
    height: 40px;
}

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

}

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

nav {
    color: rgb(0,0,0);
}

footer{
    padding: 10px;
    background-color: rgb(0, 0, 0);
    color: rgb(200,0 , 0);
    margin-bottom: 10px;
}

<!DOCTYPE html>
<html>
    <head>
        <title> Vinicius de Andrade </title>
        <meta charset="utf-8">
        <link rel="icon" href="portfolio.png">
        <link rel= "stylesheet" href="reset.css">
        <link rel="stylesheet" href="pag.css">

        <!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">

        <!-- carrega a fonte Open Sans Condensed na versão negrito, -->
        <!-- que é a única necessária para os cabeçalhos            -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>
        <main>
            <h1>Vinicius de Andrade</h1>
            <div>
                <h2>O essencial de design responsivo</h2>

                <p>Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>

                <h2>Por que fazer páginas acessíveis?</h2>

                <p>Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>

                <h2>JavaScript não obstrusivo</h2>

                <p>JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.</p>
             </div>
        </main>
        <img src="eu.jpg" alt="Foto de Vinicius de Andrade">
        <aside>
                <nav>
                    <h1> Vinicius de Andrade</h1>
                    <ul>
                        <li><a href="pag.html">Home</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                    </ul>
                </nav>
                <ul class="redes-sociais">
                    <li><a class="github" href="http://github.com/viniciusdeandrade">github</a></li>
                    <li><a class="linkedin" href="https://www.linkedin.com/in/viniciusmaa/">linkedin</a></li>
                    <li><a class="facebook" href="http://www.facebook.com/viniciusmaa">facebook</a></li>
                </ul>

            </aside>
        <footer>
            &copy; Vinicius de Andrade <time datatime = "2017-12-16"> 16 de dezembro de 2017</time>
        </footer>
    </body>
</html>

Mergulhe em programação