Tengo un aside con width 25vw y el section de 75vw que en teoria el largo total de ambos seria de 100vw, de manera que ocupen el largo de la pantalla, el section tiene un margin-left de -4px para quitar la separación que hay entre dos inline-block (aside y section tienen display inline-block), pero me resulta que el section al tener un tamaño de 75vw, este se posiciona automaticamente debajo del aside, y si disminuyo el tamaño del section a 74vw, entonces queda un espacio en blanco del lado derecho de la pantalla despues del section. Mi pregunta es, cómo hago para rellenar ese espacio con el section, y que este no se posicione debajo del aside? Soy nuevo en html y css.
Mi codigo html:
<!DOCTYPE html>
<html lang="esp">
<head>
<meta charset="UTF-8">
<title> Hola Mundo </title>
<link rel="stylesheet" href="../../CSS/AprendiendoCSS/HolaMundo.css">
</head>
<body>
<header class="encabezado">
<h1> Hola Mundo </h1>
</header>
<nav class="nav">
<h1 class="nav__titulo"> Barra de navegacion </h1>
<input class="nav__input">
<input type="button" value="Boton" class="nav__button">
</nav>
<aside class="apartado">
<h1> Apartado </h1>
</aside>
<section class="section">
<h1> Principal </h1>
</section>
<footer class="footer">
<h1> Pie de pagina </h1>
</footer>
</body>
</html>
Mi codigo css:
h1 {
border-block: 5px;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
.encabezado {
background-color: #080e20;
border: 5px;
text-align: center;
color: white;
}
.nav {
padding-top: 10px;
padding-bottom: 10px;
background-color: #ffa200;
}
.nav__titulo {
display: inline;
padding-right: 20vw;
color: #080e20;
}
.nav__input {
width: 25vw;
height: 25px;
border-radius: 6px;
border-color: black;
}
.nav__button {
height: 25px;
border-radius: 6px;
border-color: black;
background-color: #080e20;
color: white;
}
.apartado {
color: white;
background-color: #a6afc8;
display: inline-block;
box-sizing: border-box;
width: 25vw;
height: 50vh;
text-align: center;
}
.section {
color: white;
margin: -4px;
background-color: #0f100f;
display: inline-block;
width: 70vw;
height: 50vh;
text-align: center;
}
.footer {
height: 38vh;
color: white;
background-color: #0d1634;
}