A test site I've created has huge spacings, I have no idea how to solve this, it's not at all responsive. The problem is probably related to the site's HTML and CSS. Follow both below (they are small codes). Here is the github repository where the site is hosted: link and this is the link to it: link
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aulas Delivery</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/mavi.css">
<link rel="shortcut icon" href="img/icon.png">
</head>
<body>
<header>
<div class="container">
<img id="coruja" src="img/coruja.png" alt="coruja">
</div>
<div class="header-black">
</div>
<div class="container">
<nav id="menu" class="pull-left">
<li>Aulas Delivery - Reforço Escolar</li>
</nav>
</div>
</header>
<section>
<div class="info1">
<img id="info1" src="img/livro.png" alt="livro">
<p>Aulas independentes ou reforço escolar (plano mensal)</p>
</div>
<div class="info2">
<img id="info2" src="img/gongo.png" alt="relogio">
<p>Aulas independentes ou reforço escolar (plano mensal)</p>
</div>
<div class="info3">
<img id="info3" src="img/mochila.png" alt="aviao-papel">
<p>Aulas na casa do aluno (dependendo do local)</p>
</div>
<div id="materias">
<img src="img/materias.jpg" alt="materias">
</div>
<div id="imagemPerfil">
<img src="img/mavi.jpg" alt="mavi">
<h3>Maria Victoria Cabral</h3>
</div>
<div id="estrela1">
<img src="img/estrela.png" alt="estrela">
<h4>Estudante de Direito da Universidade Católica de Salvador.</h4>
</div>
<div id="estrela2">
<img src="img/estrela.png" alt="estrela">
<h4>Melhor professora!</h4>
</div>
<div id="estrela3">
<img src="img/estrela.png" alt="estrela">
<h4>Melhor professora!</h4>
</div>
<div id="contato">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul><span>Contato -</span>
<li><h4>Celular - (71) 983485225</h4></li>
<li><a href="https://www.facebook.com/mariavictoria.cabral.3">Facebook</a></li>
<li><a href="https://www.facebook.com/mariavictoria.cabral.3">Instagram</a></li>
</ul>
</div>
<div class="col-md-4">
<ul><span>Biografia de aulas -</span>
<li><p>bla bla bla bla bla bla bla bla</p></li>
</div>
</div>
</div>
</div>
</section>
<script src = "lib/jquery/jquery.min.js"></script>
<script src = "lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
@font-face{
font-family: 'IndieFlower';
src: url("../fonts/IndieFlower.ttf");
font-size: 1em;
}
header {
width: 100%;
height: 130px;
background-color: #FF9F80;
z-index: 2;
position: relative;
}
header .container {
position: relative;
}
header .header-black {
background-color: #FFC48C;
height: 30px;
}
header #coruja {
position: absolute;
top: 1px;
}
#menu{
margin: 30px 140px;
}
#menu li{
display: inline-block;
font-family: "IndieFlower";
color: #0B486B;
font-size: 30px;
padding: 0px 25px;
}
section{
background-color: #9DE0AD;
height: 1200px;
}
section .info1{
background-repeat: no-repeat;
position: relative;
top: 420px;
left: -820px;
}
section .info1 p{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}section .info2{
background-repeat: no-repeat;
position: relative;
top: 420px;
left: 24px;
}
section .info2 p{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
section .info3{
background-repeat: no-repeat;
position: relative;
top: 420px;
left: 24px;
}
section .info3 p{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
#materias{
background-repeat: no-repeat;
position: relative;
top: -200px;
right: -830px;
}
#imagemPerfil{
[![inserir a descrição da imagem aqui][1]][1]
background-repeat: no-repeat;
position: relative;
top: -570px;
right: -50px;
}
#imagemPerfil h3{
font-size: 24px;
color: #490A3D;
font-family: 'IndieFlower';
font-weight: bold;
}
#estrela1{
background-repeat: no-repeat;
position: relative;
top: -915px;
right: -365px;
}
#estrela1 h4{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
#estrela2{
background-repeat: no-repeat;
position: relative;
top: -905px;
right: -365px;
}
#estrela2 h4{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
#estrela3{
background-repeat: no-repeat;
position: relative;
top: -895px;
right: -365px;
}
#estrela3 h4{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
#contato{
background-color: #5E299A;
width: 100%;
height: 400px;
}
#contato ul{
margin-top: 36px;
font-family: 'OpenSans';
}
#contato ul span{
color: #FDE092;
font-size: 24px;
}
#contato li a{
font-size: 19px;
}
#contato li h4{
color: #FDE092;
font-size: 19px;
}
#contato p{
font-family: 'OpenSans';
font-size: 19px;
color: #FDE092;
}