Olá, estou com o problema em um site que estou fazendo. O problema é que estou tentando afastar duas sections e o footer, mas quando eu separo o footer da segunda section fica um espaço em branco. Como eu corrijo? HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<title>Média</title>
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logomédic-bola.png" alt="logomed" class="logomed"></h1>
<nav>
<ul>
<li><a href="http://ceharmonia.com.br"><img src="logocolegioai.png" alt="logo"></a></li>
</ul>
</nav>
</div>
</header>
<main>
<h2>Calculador de Média</h2>
<section class="secfund">
<h3 class="titulosec">Média fundamental</h3>
<p>Sua nota da P1: <input type="number"></p>
<input type="button" value="Ver quanto falta">
<p>Sua nota da P2: <input type="number"></p>
<input type="button" value="Calcular a média">
</section>
<section class="secmed">
<h4 class="titulosec">Média Ensino Médio</h4>
<p>Sua nota da P1: <input type="number"></p>
<input type="button" value="Ver quanto falta">
<p>Sua nota da P2: <input type="number"></p>
<input type="button" value="Calcular a média">
</section>
</main>
<footer>
<img src="logomédic-bola.png" alt="logomed" class="logomed">
</footer>
</body>
</html>css:
body{
font-family: 'Bebas Neue', cursive;
}
header{
background-color: white;
}
h1 img{
padding: 10px;
margin: 20px auto;
}
.logomed{
width: 150px;
}
.caixa{
position: relative;
width: 1100px;
margin: 30px auto;
}
nav img{
width: 220px;
}
nav {
position: absolute;
top: 0px;
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 40px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
main{
background-color: #22416d;
}
h2{
font-size: 100px;
text-align: center;
color: #44a94d;
padding: 10px 10px;
font-weight: bold;
}
.titulosec{
font-weight: bold;
font-size: 25px;
padding-bottom: 10px;
}
.maincaixa{
background-color: royalblue;
}
section {
color: black;
font: normal 15pt Arial;
background: white;
border-radius: 10px;
padding: 50px;
margin: 10px auto;
margin-bottom: 30px;
width: 500px;
box-shadow: 5px 5px 10px rgb(100, 97, 97);
text-align: center;
}
footer{
background-color: #edd447;
text-align: center;
}