Icones um em cima do outro. | HTML5 e CSS3 I: Suas primeiras páginas da Web

Já li e reli os códigos e não consigo achar o motivo para os ícones estarem um em cima do outro. Segue os códigos.

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Blog - João da Silva</title>
            <link rel="stylesheet" href="reset.css">
            <link rel="stylesheet" href="bio.css">
            <link rel="icon" href="projeto/favicon.png">
        <!-- 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">
        <link href="https://fonts.googleapis.com/css?family=Nova+Script" rel="stylesheet">
        </head>
        <body>
            <main>
                <h1>Blog</h1>
                <div>
                    <article>
                        <h2>O essencial de design responsivo</h2>
                        <time datetime="2016-15-12">15 de dezembro de 2016</time>
                        <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>
                        <a href="#" class="leiamais">Leia mais</a>
                        <footer>Tags: <a href="#">design responsivo</a> <a href="#">mobile</a> <a href="#">css</a> </footer>
                    </article>
                    <article>
                        <h2>Por que fazer páginas acessíveis?</h2>
                        <time datetime="2016-14-12">14 de dezembro de 2016</time>
                        <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>
                        <a href="#" class="leiamais">Leia mais</a>
                        <footer>
                            Tags: <a href="#">Acessibilidade</a>, <a href="#">facilidade</a>, <a href="#">Failidade de uso</a>
                        </footer>
                    </article>
                    <article>
                        <h2>JavaScript não obstrusivo</h2>
                        <time datetime="2016-13-12">13 de dezembro de 2016</time>
                        <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>
                        <a href="#" class="leiamais">Leia mais</a>
                        <footer>Tags: <a href="#">Programação</a>,<a href="#">Tag 2</a>,<a href="#">Tag 3</a></footer>
                    </article>
                </div>
            </main>
            <aside>
                <img src="eu.jpg" alt="Foto de João da Silva">
                <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a href="home.html">Home</a></li>
                        <li><a href="Portifolio.html">Portifólio</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="redessociais">
                        <li><a class="github" href="http://www.github.com/joaodasilva">Github</a></li>
                        <li><a class="twitter" href="http://www.twitter.com/joaodasilva">Twitter</a></li>
                        <li><a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">LinkedIn</a></li>
                    </ul>   
            </aside>
            <footer class="mainfoot">
            &copy; João da Silva 2014
            </footer>
        </body>
    </html>

Agora o CSS

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

main h1 {
    font-size: 60px;
    text-align: center;
    color: aliceblue;
    background-color: #851944;
    padding: 25px;
    border-bottom: 10px solid black;
}

main h1, aside h1 {
    text-transform: uppercase;
}

h2 {
    font-size: 30px;
}

main div {
    width: 720px;
    margin: auto;
    padding: 30px 0;
}

p {
    text-align: justify;
    margin: 20px 0;
}

blockquote {
    background-color: #D9E5E3;
    padding: 20px;
    margin: 20px 40px;
    border: 10px solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
}

aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
}

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

nav {
    color: #F2FFFC;
    padding: 20px;
}

.mainfoot {
    background-color: black;
    color: #F2FFFC;
    padding: 20px;
}

main a {
    color: #851944;
}

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

strong {
    font-size: bold;
}

em {
    font-style: italic;
}

#redessociais li {
    display: inline-block;
}

article {
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.leiamais {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    padding: 8px;
    margin: 16px;
    background-color: #E6E7E8;
    text-align: center;
}
.redessociais a {
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -9999px;
}
.github {
    background-image: url(github.png);
}
.twitter {
    background-image: url(twitter.png);
}
.linkedin {
    background-image: url(linkedin.png);
}