I have the following problem, I have done this exercise to practice my front skills, I am doing it without FlexBox since it is easier for me to do it that way, but I need to get out of my comfort zone, the problem I have is that there is a space at the end Of my aside and my main, just above my footer, I don't know the error for which I have decided to turn to the experts that you are. I attach my HTML and CSS. I enclose the visual code so that they do not leave this page. In the snippet the space below the footer appears, but on the computer in full screen it does not appear, so my error would only be above the 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>
I managed to solve it by editing this part of the aside and the main