HTML/CSS - Animations problems - html

Question

I am trying to make different website animations and using responsive design.
The problem is when I try to apply this changes to my header and affects also to my .heading element. I realized that something is happening with the height in the #main where apparently its height is 0.
Its probably bacuse the structure is not well made.
Could you help me with that? Hope my explanation is clear.
I share with you my code:
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
/* Esto es para las animaciones */
header {
float: left;
top: 0;
left: 0;
width: 100%;
animation-name: moveInLeft;
animation-duration: 2s;
animation-timing-function: 1s;
overflow: hidden;
}
#container {
overflow: hidden;
}
html {
font-size: 62.5%;
font-family: 'Ubuntu', sans-serif;
}
body {
font-size: 2rem;
box-sizing: border-box;
}
.options {
background-color: #777;
width: 100%;
display: block;
z-index: 1;
height: 3.5rem;
margin-bottom: 3rem;
}
.select-active {
background: green;
}
.options ul {
list-style-type: none;
}
.options ul li {
float: left;
transition: all 1000ms;
}
.options ul li a {
display: block;
padding: 0.55rem;
color: white;
text-decoration: none;
}
.special {
word-spacing: 0px;
}
.submenu {
width: 15%;
float: left;
background-color: white;
margin-top: 1.3rem;
}
.body {
width: 80%;
float: left;
padding: 1.5rem;
}
.heading {
color: black;
text-align: center;
font-size: 5rem;
padding: 0.6rem;
background-image: linear-gradient( to right bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)), url(/images/logo.png);
margin-left: 5rem;
width: 95%;
}
.text {
text-align: left;
text-align: justify;
padding-top: 5.5rem;
padding-right: 1rem;
margin-top: 3rem;
margin-left: 5rem;
font-size: 1.5rem;
}
h2 {
text-align: left;
padding-right: 1rem;
margin-top: 4rem;
}
.footer {
background-color: grey;
float: left;
width: 100%;
color: white;
padding: 4.2rem;
margin-top: 7rem;
}
.submenu ul li {
list-style-type: none;
border: solid 2px white;
padding: 1rem;
background-color: rgb(220, 220, 220);
margin-left: 2rem;
font-size: 1.5rem;
transition: all 1000ms;
}
ul li {
cursor: pointer;
}
.submenu ul li:hover {
background-color: rgb(0, 150, 255);
border-radius: 30px;
}
.options ul li:hover {
background: black;
transform: translate(5px, 5px);
}
.picture {
float: right;
position: relative;
top: -6.5rem;
left: -11rem;
}
.logo {
width: 2.5rem;
}
.footer .bg-video__content {
object-fit: fill;
height: 15rem;
opacity: .5;
}
#media screen and (max-width:992px) {
header,
.submenu {
display: none;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id=container>
<header id="header">
<nav class="options">
<ul>
<li class="select-active">CSS</li>
<li>
<a href="">
SASS
</a>
</li>
<li>Javascript</li>
<li span style="word-spacing: 0px">Front End vs Back End</li>
</ul>
</nav>
<div class="picture">
<img class="logo" src="https://seeklogo.com/images/C/css3-logo-8724075274-seeklogo.com.png" alt="">
</div>
</header>
<main id="main">
<aside class="submenu">
<ul>
<li>Introducción</li>
<li>Styling block</li>
<li>Selectores</li>
<li>Propiedades</li>
<li>Cascada y herencia</li>
<li>The Box Model</li>
<li>Responsive</li>
</ul>
</aside>
<section class="body">
<header class="heading">CSS
</header>
<article class="text">
<h2>Styling Blocks</h2><br><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.​ Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
(como Firefox OS).</p><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.​ Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
(como Firefox OS).</p><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.​ Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
(como Firefox OS).</p> <br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.​ Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web,y GUIs para muchas aplicaciones móviles
(como Firefox OS).</p><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.​ Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,como
las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles (como
Firefox OS).</p><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.​ Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,como
las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles (como
Firefox OS).</p><br>
</article>
</section>
</main>
<footer class="footer">
<div class="bg-video">
<video class="bg-video__content" autoplay muted loop>
<source src="vid.mp4" type="video/mp4">
<source src="vid.webm" type="video/webm">
Your browser is not supported!
</video>
</div>
</footer>
</div>

Answer 1

You're using floats inside your #main div, which is why the height is 0. You need a 'clearfix' (see What is a clearfix?). Specifically:
#main:after {
content: "";
display: table;
clear: both;
}
Resource
You'd be better off using flexbox for your layouts (as my first link mentions), floats are becoming out of date for page layouts and are no longer best practice.