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">
© 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
