Separação de Section em branco

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;
}

section { color: black; font: normal 15pt Arial; background: white; border-radius: 10px; padding: 20px; margin: 10px auto; width: 500px; height: 10rem; box-shadow: 5px 5px 10px rgb(100, 97, 97); text-align: center; }