I do not know where I'm going wrong, but my footer is in the middle of the page. It's my future portfolio, so not everything will be definitive. Other suggestions are welcome.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Open Sans';
}
header{
width: 100%;
height: 65px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 1;
}
h1{
padding: 20px;
}
#menu ul{
margin-right: 5%;
}
#menu li{
margin-right: 0.5%;
display: inline;
padding: 20px;
float: right;
}
#menu li a{
color: #ffffff;
font-family: 'Open Sans';
text-decoration: none;
padding: 10px;
}
#menu a:hover{
text-decoration: underline;
}
h1{
margin-left: 5%;
color:#fff;
text-decoration: none;
float: left;
font-size: 20px;
}
#banner{
position: relative;
background:url(img/code-3.jpeg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
background-position:0px 0px ;
/*margin-bottom: 30px;*/
}
#banner p{
position: relative;
text-align: center;
color: #fff;
font-family: 'Open Sans';
font-size: 3.5em;
top:48%;
/*left: 400px;*/
}
.secao{
position: absolute;
width: 100%;
/*height: 100vh;*/
background-color: #eee;
}
.servicos{
padding: 1.5%;
margin-top: 60px;
margin-left: 10%;
width: 35%;
float: left;
border-radius:7px;
/*height: 300px;*/
color:#2d2d2d;
/*background-color: #eee;*/
text-align: center;
}
.servicos h2{
font-family: 'Roboto';
font-size: 2.4em;
margin-bottom: 2%;
}
.servicos p{
font-family: 'Open Sans';
font-size: 120%;
line-height: 30px;
}
.tecnologias{
margin:10% 0;
width: 100%;
}
.tecnologias h2{
margin-bottom: 4%;
}
.tecno{
display: inline-block;
margin-left: 2%;
}
footer{
position: relative;
background-color: red;
font-size: 40px;
}
<!DOCTYPE html>
<html lang="pt-br">
<title>Alexandre | Desenvolvedor Web</title>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Montserrat|Slabo+27px" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<body>
<header id="cabecalho">
<h1>Alexandre | Front End Developer <i class="fa fa-code"></i></h1>
<nav id="menu">
<ul id="lista">
<li> <a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li> <a href="#">Contato</a></li>
<li> <a href="#">Serviços</a></li>
</ul>
</nav>
</header>
<div id="banner"><p>Posso Te Ajudar A Ter Um Site Só Seu</p></div>
<section class="secao">
<div class="servicos">
<h2>Quem Sou Eu</h2>
<p>Oi! Me chamo Alexandre e sou Desenvolvedor Front End.</p>
<p>Isso quer dizer que se você tem uma empresa, um hobbie, ou um projeto e precisa de um site para exibir na web eu posso te ajudar.</p>
</div>
<div class="servicos">
<h2>Serviços</h2>
<p>Trabalho com desenvolvimento de sites usando as mais atuais tecnologias buscando os melhores resultados possíveis.</p>
</div>
<div class="servicos tecnologias">
<h2>Tecnologias Que Uso</h2>
<div class="tecno">
<figure>
<img src="img/html5-badge-156.png" alt="logo html5">
<figcaption>HTML5</figcaption>
</figure>
</div>
<div class="tecno">
<figure>
<img src="img/css3-156.png" alt="logo css3">
<figcaption>CSS3</figcaption>
</figure>
</div>
<div class="tecno">
<figure>
<img src="img/javascript-156.png" alt="logo javascript">
<figcaption>JAVASCRIPT</figcaption>
</figure>
</div>
<div class="tecno">
<figure>
<img src="img/wordpress-156.png" alt="wordpress logo">
<figcaption>WORDPRESS</figcaption>
</figure>
</div>
</div>
</section>
<footer>
<p>teste</p>
</footer>
</body>
</html>