O background preto não está saindo do footer da seção Tags.

Eu descobri que como o arquivo blog.html está também utilizando o mesmo css que o arquivo bio.html, ele está pegando o que eu passei para o footer, que é o background com a cor preta, Aí, quando eu crio uma classe/id para o rodapé da página blog.html para isola-lo, o fundo preto continua na seção Tags . O que faço para arrumar?

body {

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

}

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


h1, h2 {
    font-size: 30px;

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

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


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


blockquote{

    margin-top: 40px;
    margin-bottom:40px;
    background-color: #D9E5E3;
    border: 10px solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
}


aside{

background-color: #3C1D3D;
    color: #F2FFFC;

}


footer{
background-color: #000;
color: #F2FFFC;
}



nav a {    
    color: #F2FFFC;
}

main a{

    color: #851944;
}

aside a{

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

blockquote, aside, footer {
    padding: 20px;
}

aside {
    text-align: center;
}

aside h1{

    font-size: 30px;
    margin-bottom: 25px;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.icones-sociais li {

    display: inline-block;
}

.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
}

    <main>
    <h1>Blog</h1>
    <div>

    <article>
        <h2>O essencial de design responsivo</h2>
        <time datetime="2014-07-01">01 de julho de 2014</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="#">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="2014-06-15">15 de junho de 2014</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="#">Leia mais</a>
        <footer>Tags: <a href="#">Design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a></footer>

    </article>


    <article>
        <h2>JavaScript não obstrusivo</h2>
        <time datetime="2014-05-28">28 de maio de 2014</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="#">Leia mais</a>
        <footer>Tags: <a href="#">Design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a></footer>
    </article>



    </div>
    </main>
    <img src="eu.jpg" alt = "Foto de João da Silva">
    <aside>
        <h1>Foto de João da Silva</h1>
        <nav>
            <ul class="icone-redes-sociais">
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</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>            
    </aside>
    <footer class="rodape-pagina">
        © João da Silva 2014
    </footer>
</body>