Dúvida Apostila Caelum: HTML, CSS - Desafio Cap. 4

Front-end HTML
, ,
#1

Boa tarde. O exercício 3 (desafio) da seção 4.15 propõe que nos livremos de um magic number presente no código. Após várias tentativas, muitas tentativas, não consegui resolvê-lo. Poderiam me ajudar? Ou pelo menos uma meia dica. Já tô achando que é coisa do demo. Agradeço imensamente.

O magic number está destacado por uma seta no código css abaixo.

Código HTML:

<footer>
        <div class="container">
            <h1><img src="img/logo-rodape.png" alt="Logo Mirror Fashion"></h1>
            <ul class="social">
                <li class="facebook"><a href="http://facebook.com/mirrorfashion">Facebook</a>/li>
                <li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
                <li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
            </ul>
        </div>
</footer>

Código CSS:

footer {
    background-image: url(../img/fundo-rodape.png);
    clear: both;
    padding: 20px 0;
}

footer .container {
    position: relative;
}

.social {
    position: absolute;

    top: 12px; **<-- O _magic number_ ao qual me referi.**
    right: 0;
}

.social a {
    height: 32px;
    width: 32px;

    display: block;
    text-indent: -9999;
}

.social a[href*="facebook.com"] {
    background-image: url(../img/facebook.png);/* no-repeat top right;*/
}

.social a[href*="twitter.com"] {
    background-image: url(../img/twitter.png); /*no-repeat top;*/
}

.social a[href*="plus.google.com"] {
    background-image: url(../img/googleplus.png); /*no-repeat right;*/
}

.social li {
    float: left;
    margin-left: 25px;
}
#2

Use porcentagem, afinal não é um número fixo arbitrário, e irá se adaptar melhor a cada tipo de tela e navegador

#3

muda o position da classe, e da margin: 0 auto;