O footer de um projeto que estou criando ultrapassa o body em width. Segue o código:
<!DOCTYPE html>
<html>
<head>
<title>Thales Maia</title>
<meta charset="UTF-8">
<link rel="icon" href="../img/favicon.png">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/home.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Thasadith">
</head>
<body>
<main>
<div class="topo">
<h1 class="principal">Thales Maia</h1>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre Mim</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
<div class="corpo">
<img class="primeiro"src="../img/1.png" alt="Quadro pintado">
<img class="segundo"src="../img/2.png" alt="Quadro pintado">
<img class="terceiro"src="../img/3.png" alt="Quadro pintado">
</div>
</main>
<div class="baixo">
<footer>
<ul class=redessociais>
<li><a class="twitter" href="twitter.com/mbthales">Twitter</a></li>
<li><a class="github" href="github.com/mbthales">GitHub</a></li>
</ul>
</footer>
</div>
</body>
</html>
html {
height: 100%;
}
body {
background: #EDEDED;
margin: 0px;
width: 100%;
height: 100%;
}
.principal {
background: #A7ADC6;
text-align: center;
padding: 15px;
font-family: "Thasadith", "Arial" ,sans-serif;
font-size: 50px;
margin: 0px;
}
.topo {
background: #A7ADC6;
margin-bottom: 35px;
width: 100%;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline;
}
.menu ul li a {
padding: 2px 10px;
display: inline-block;
text-decoration: none;
color: #000000;
font-family: "Open Sans Condensed", "Arial", sans-serif;
font-size: 25px;
}
.corpo {
width: 100%;
padding-bottom: 80px;
text-align: center;
}
.primeiro {
margin: 80px;
float: left;
width: 260px;
height: 190px;
}
.segundo {
margin: 80px;
width: 260px;
height: 190px;
}
.terceiro {
margin: 80px;
float: right;
width: 260px;
height: 190px;
}
.baixo {
background-color: #A7ADC6;
color: #000000;
margin: 0;
padding: 30px;
bottom: 0;
position: absolute;
width: 100%;
}
.baixo ul {
padding: 0px;
margin: 0px;
list-style: none;
text-align: center;
}
.baixo ul li {
display: inline;
}
.baixo ul li a {
display: inline-block;
padding: 2px 10px;
font-family: "Open Sans Condensed", "Arial", sans-serif;
color: #000000;
}