Usar classes

Em função de configurações pedidas em exercícios anteriores, só consegui obter o resultado pedido com os seguintes códigos:

HTML

<aside class="navegacao-site">
            <div>
                <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a class="navegacao-site-lista" href="index.html">Home</a></li>
                        <li><a class="navegacao-site-lista" href="portflolio.html">Portfolio</a></li>
                        <li><a class="navegacao-site-lista" href="bio.html">Sobre mim</a></li>
                        <li><a class="navegacao-site-lista" href="blog.html">Blog</a></li>
                        <li><a class="navegacao-site-lista" href="contato.html">Contato</a></li>
                    </ul>
                </nav>
                <ul class="icones-sociais">
                    <li><a href="http://github.com/git-joaodasilva"><img src="github.png" alt="Github"></a></li>
                    <li><a href="http://twitter.com/twitter-joaodasilva"><img src="twitter.png" alt="Twitter"></a></li>
                    <li><a href="http://br.linkedin.com/pub/linkedin-joão-da-silva/32/4/508"><img src="linkedin.png" alt="Linkedin"></a></li>
                </ul>
            </div>
        </aside>

CSS

.navegacao-site {
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
}

.navegacao-site-lista  {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
    padding: 20px;
}