How to get rid of white space below div after translateY - html

Question

I am trying to get rid of white space after I animate and translateY. Maybe setting the body height to auto? Does translateY leave a margin at the bottom or is that just the body white space, I can't click on it in inspect. Here is my code in a codepen. The white space is after my last div, I have attached my code and keyframes.
body{
padding: 0;
margin: 0;
overflow-x: hidden;
}
.banner{
position: relative;
transform: scale(1.5);
background: url(../image/splashing.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
animation: slides 1s;
animation-delay:2s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(0,0,0,1);
animation-fill-mode:forwards;
-webkit-animation:slides 1s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: cubic-bezier(0,0,0,1);
-webkit-animation-fill-mode: forwards;
}
.header h1{
display: block;
position: absolute;
bottom: 15vh;
left: 0;
}
.header{
position: relative;
color: white;
opacity: 0;
animation: Fade 1s;
animation-delay: 3s;
animation-timing-function: cubic-bezier(0,0,1,1);
animation-fill-mode: forwards;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-webkit-animation: Fade 1s;
-webkit-animation-timing-function: cubic-bezier(0,0,1,1);
-webkit-animation-delay:3s;
-webkit-animation-fill-mode: forwards;
z-index: 999;
}
.orange{
background-color: orange;
animation: up .5s;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
-webkit-animation: up .5s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes slides{
0%{
-webkit-transform: scale(2,2);
}
100%{
-webkit-transform: scale(1,1);
}
}
#-webkit-keyframes Fade{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#-webkit-keyframes up{
from{
-webkit-transform: translateY(0);
}
to{
-webkit-transform: translateY(-30%);
}
}

Answer 1

using position:absolute; in class orange will do the trick