Display

Pessoal Help-me, estou com o seguinte código HTML

<aside>
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.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>
                <li><a href="http://github.com/joaodasilva"><img src="../img/github.png" alt="Github"></a></li>
                <li><a href="http://twitter.com/joaodasilva"><img src="../img/twitter.png" alt="Twitter"></a></li>
                <li><a href="http://linkedin.com/joaodasilva"><img src="../img/linkedin.png" alt="Linkedin"></a></li>
            </ul>            
        </aside>

E o CSS

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


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

aside ul li {
    display: inline-block;
}    

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

Não consigo deixar somente os icones das redes sociais inline. Já tentei separar com duas tags nav mas não funcionou. Poderiam me ajudar ?