Rodapé Elevado | HTML5 e CSS3 I: Suas primeiras páginas da Web

Estou tentando aplicar no blog do exercício o que foi ensinado no curso, mas não consigo fixar o rodapé na base da página, Uma margem do html geral se mantêm.

Segue o html abaixo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blog do Front End</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="blog.css">

  </head>
  <body>
<header>
  <h1> Blog do João da Silva </h1>
</header>


  <main>
    <div>
        <article >
          <h2>O essencial de design responsivo</h2>
              <time datetime="2014-07-2013"> 07 de Julho de 2013</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>


        <footer>  <a href="#">Leia mais.</a></footer>

        </article>

        <article >
          <h2>Por que fazer páginas acessíveis?</h2>
          <time datetime="2014-07-2013"> 07 de Julho de 2013</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>


        <footer>  <a href="#">Leia mais.</a></footer>

        </article>

        <article >
          <h2>JavaScript não obstrusivo</h2>
            <time datetime="2014-07-2013"> 07 de Julho de 2013</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>

          <footer>

            <a href="#">Javascript</a>, <a href="#">boas práticas</a>.

          </footer>

        </article>

    </div>

  </main>


  <footer class="rodape">
      &copy João da Silva;
  </footer>

  </body>



</html>

E a parte do CSS:



header h1{

  font-size: 50px;
  font-weight: bold;
  text-align: center;
  background-color: SlateBlue ;
  padding: 80px;
  margin-bottom: 20px;
  border-bottom: 20px solid gray;
  font-family: fantasy;

}


main h1{
  font-size: 45px;

  text-align: center;
  font-family: 'El Messiri', sans-serif;



}

h2{
  font-size: 30px;
  font-family: 'El Messiri', sans-serif;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 30px;

}

body{
  background-color: #F2FFFC;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

p{
  text-align: justify;
  line-height: 1.5;
  margin-bottom: 10px;



}

footer {
    padding: 2px;
    margin:0px;
}


main div {
    margin-left: 25px;
    margin-right: 25px;

}

html{
  margin: 0px;

}

.rodape {
    background-color: black;
    color: white;
    margin-bottom:  0px;
    padding: 15px;
}

Alguém pode me ajudar? Vocês poderiam me ajudar