Existe um Espaço em branco no inferior página HTML que estou criando. Queria removê-la, mas não sei o parâmetro em CSS que está causando aquele espaço indesejado. O código em HTML é o seguinte:
@keyframes bounce {
0%,
20%,
60%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@media (min-width: 992px) {
* {
margin: 0px;
}
#container {
width: 1152px;
height: 100vh;
background-image: linear-gradient(to bottom, white, gray);
}
.edusfLogo2 {
display: block;
position: relative;
top: 200px;
left: 500px;
}
.janelaUm {
background-color: rgb(35, 126, 40);
display: block;
position: relative;
top: 301px;
left: 210px;
width: 130px;
height: 130px;
border-radius: 35%;
}
.janelaUm:hover {
animation: bounce 1s;
background-color: white;
color: rgb(35, 126, 40);
}
.imagemUsuario {
position: relative;
top: 15px;
left: 25px;
width: 80px;
height: 80px;
}
.perfil {
position: relative;
top: 15px;
left: 45px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.janelaDois {
background-color: rgb(35, 126, 40);
display: block;
position: relative;
top: 171px;
left: 410px;
width: 130px;
height: 130px;
border-radius: 35%;
}
.janelaDois:hover {
animation: bounce 1s;
background-color: white;
color: rgb(35, 126, 40);
}
.imagemReservas {
position: relative;
top: 15px;
left: 25px;
width: 80px;
height: 80px;
}
.reservas {
position: relative;
top: 10px;
left: 30px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.janelaTres {
background-color: rgb(35, 126, 40);
display: block;
position: relative;
top: 42px;
left: 610px;
width: 130px;
height: 130px;
border-radius: 35%;
}
.janelaTres:hover {
animation: bounce 1s;
background-color: white;
color: rgb(35, 126, 40);
}
.imagemAdministrador {
position: relative;
top: 15px;
left: 25px;
width: 80px;
height: 80px;
}
.administrador {
position: relative;
top: 9px;
left: 14px;
font-weight: bold;
font-size: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.janelaQuatro {
background-color: rgb(35, 126, 40);
display: block;
position: relative;
top: -87px;
left: 810px;
width: 130px;
height: 130px;
border-radius: 35%;
}
.janelaQuatro:hover {
animation: bounce 1s;
background-color: white;
color: rgb(35, 126, 40);
}
.imagemSair {
position: relative;
top: 15px;
left: 35px;
width: 80px;
height: 80px;
}
.sair {
position: relative;
top: 10px;
left: 50px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.rodape {
display: inline-block;
position: relative;
top: 60px;
width: 1152px;
height: 136px;
background-color: rgb(16, 92, 20);
}
.edusfLogo1 {
display: block;
position: relative;
left: 800px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexPC.css">
<link rel="stylesheet" href="indexTV.css">
<title></title>
</head>
<body class="telaFundo">
<div id="container">
<header class="cabeçalho">
<img class="edusfLogo2" src="edusfLogo2.png" alt="">
</header>
<tbody>
<div class="janelaUm">
<img class="imagemUsuario" src="images/user.png" alt="Perfil">
<p class="perfil">Perfil</p>
</div>
<div class="janelaDois">
<img class="imagemReservas" src="images/reservation.png" alt="Reservas">
<p class="reservas">Reservas</p>
</div>
<div class="janelaTres">
<img class="imagemAdministrador" src="images/administrator.png" alt="Administrador">
<p class="administrador">Administrador</p>
</div>
<div class="janelaQuatro">
<img class="imagemSair" src="images/exit.png" alt="Sair">
<p class="sair">Sair</p>
</div>
</tbody>
<tfoot>
<div class="rodape">
<p class="">Copyright</p>
<img class="edusfLogo1" src="edusfLogo1.png" alt="">
</div>
</tfoot>
</div>
</body>
</html>