Tengo el siguiente problema, he realizado este ejercicio para practicar mis habilidades de front, lo estoy haciendo sin FlexBox ya que me es más fácil hacerlo así, pero necesito salir de mi zona de confort, el problema que tengo es que hay un espacio al final de mi aside y de mi main, justo encima de mi footer, desconozco el fallo por lo cual he decidido recurrir a los expertos que son ustedes. Adjunto mi HTML y CSS. Adjunto el código visual para que no se salgan de esta página. En el snippet sale el espacio inferior del footer, pero en la computadora en pantalla completa no sale, por lo que mi fallo sería solo encima del footer.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
.header {
height: 5vh;
background-color: #222831;
color: white;
}
.menu__logo {
display: inline-block;
}
.menu__list {
display: inline-block;
list-style: none;
position: absolute;
right: 0;
}
.menu__list-item {
display: inline-block;
}
.sidebar {
width: 20%;
height: 90vh;
background-color: #ffd369;
display: inline-block;
position: relative;
}
.sidebar__box {
height: 15%;
border-radius: 10px;
background-color: #222831;
margin: 10px;
width: 90%;
}
.content {
display: inline-block;
height: 90vh;
width: 80%;
position: absolute;
background-color: #393e46;
}
.footer {
height: 5vh;
background-color: #222831;
color: white;
}
.footer__menu__logo {
display: inline-block;
}
.footer__menu__list {
display: inline-block;
position: absolute;
right: 0;
}
.footer__menu__list-item {
display: inline-block;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desafio Layout 1</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="header">
<nav class="menu">
<h1 class="menu__logo">Logo</h1>
<ul class="menu__list">
<li class="menu__list-item"><a href="#">Home</a></li>
<li class="menu__list-item"><a href="#">Cursos</a></li>
<li class="menu__list-item"><a href="#">Instructores</a></li>
<li class="menu__list-item"><a href="#">Blog</a></li>
</ul>
</nav>
</header>
<aside class="sidebar">
<div class="sidebar__box"></div>
<div class="sidebar__box"></div>
<div class="sidebar__box"></div>
<div class="sidebar__box"></div>
</aside>
<main class="content">
<h2>Este es el nuevo contenido</h2>
</main>
<footer class="footer">
<nav class="footer__menu">
<h1 class="footer__menu__logo">Logo</h1>
<ul class="footer__menu__list">
<li class="footer__menu__list-item"><a href="#">Facebook</a></li>
<li class="footer__menu__list-item"><a href="#">Instagram</a></li>
<li class="footer__menu__list-item"><a href="#">Twitter</a></li>
<li class="footer__menu__list-item"><a href="#">LinkedIn</a></li>
</ul>
</nav>
</footer>
</body>
</html>