Почему при прокрутке вправо/влево между страницами пустое пространство?

var down = document.getElementsByClassName("btn-arrow-down"); 
 
for (var i = 0; i < down.length; i++) { 
    down[i].onclick = function showNext() { 
        var parent = this.parentElement; 
        var ourCont = parent.parentElement; 
        var nextCont = ourCont.nextElementSibling; 
        var pageToShow = nextCont.firstElementChild; 
        var contToMove = ourCont.parentElement; 
 
        function animationEnded() { 
            contToMove.classList.remove('page-moveUp'); 
            parent.classList.remove('page-visible'); 
            contToMove.removeEventListener('animationend', animationEnded); 
        } 
        contToMove.addEventListener('animationend', animationEnded); 
        pageToShow.classList.add('page-visible'); 
        contToMove.classList.add('page-moveUp'); 
 
    } 
} 
 
var up = document.getElementsByClassName("btn-arrow-up"); 
 
for (var i = 0; i < up.length; i++) { 
    up[i].onclick = function showLast() { 
        var parent = this.parentElement; 
        var ourCont = parent.parentElement; 
        var lastCont = ourCont.previousElementSibling; 
        var pageToShow = lastCont.firstElementChild; 
        var contToMove = ourCont.parentElement; 
 
        function animationEnded() { 
            contToMove.classList.remove('page-moveDown'); 
            parent.classList.remove('page-visible'); 
            contToMove.removeEventListener('animationend', animationEnded); 
        } 
        contToMove.addEventListener('animationend', animationEnded); 
 
        pageToShow.classList.add('page-visible'); 
        contToMove.classList.add('page-moveDown'); 
 
 
    } 
 
} 
 
var left = document.getElementsByClassName("btn-arrow-left"); 
 
for (var i = 0; i < left.length; i++) { 
    left[i].onclick = function showLeft() { 
        var parent = this.parentElement; 
        var maybeLeftToOpen = parent.previousElementSibling; 
        var ourCont = parent.parentElement; 
        var contToMove = ourCont.parentElement; 
        var cls = maybeLeftToOpen.className; 
        var clsarray = cls.split(); 
 
        for (var j = 0; j < clsarray.length; j++) { 
            var name = clsarray[j]; 
            if (name = 'page') { 
                var leftToOpen = maybeLeftToOpen; 
 
                function animationEnded() { 
                    contToMove.classList.remove('page-moveLeft'); 
                    parent.classList.remove('page-visible'); 
                    contToMove.removeEventListener('animationend', animationEnded); 
                } 
 
                contToMove.addEventListener('animationend', animationEnded); 
 
                leftToOpen.classList.add('page-visible'); 
                contToMove.classList.add('page-moveLeft'); 
 
            } 
 
        } 
    } 
 
} 
var right = document.getElementsByClassName("btn-arrow-right"); 
 
for (var i = 0; i < right.length; i++) { 
    right[i].onclick = function showRight() { 
        var parent = this.parentElement; 
        var maybeRightToOpen = parent.nextElementSibling; 
        var ourCont = parent.parentElement; 
        var contToMove = ourCont.parentElement; 
        var cls = maybeRightToOpen.className; 
        var clsarray = cls.split(); 
        for (var j = 0; j < clsarray.length; j++) { 
            var name = clsarray[j]; 
            if (name = 'page') { 
                var rightToOpen = maybeRightToOpen; 
 
                function animationEnded() { 
                    contToMove.classList.remove('page-moveRight'); 
                    parent.classList.remove('page-visible'); 
                    contToMove.removeEventListener('animationend', animationEnded); 
                } 
                contToMove.addEventListener('animationend', animationEnded); 
                rightToOpen.classList.add('page-visible'); 
                contToMove.classList.add('page-moveRight'); 
 
            } 
        } 
    } 
}

body{ 
    overflow-x: hidden; 
    overflow-y: hidden;     
} 
.container{    
    display: flex;    
} 
.page{   
    min-width: 100vw; 
    min-height: 100vh;  
    position: relative;   
    display: none; 
} 
.page-visible { 
    display: block; 
} 
.q{ 
    background:purple; 
} 
.a{ 
    background:orange; 
} 
.z{ 
    background:red; 
} 
.w{ 
    background:brown; 
} 
.s{ 
    background:green; 
} 
.x{ 
    background:gray; 
} 
.e{ 
    background:rgb(42, 165, 83); 
} 
.d{ 
    background:rgb(91, 139, 91); 
} 
.c{ 
    background:rgb(168, 37, 37); 
} 
.up{ 
    position: absolute; 
    top: 50px; 
    left: 47%;   
} 
.down{ 
    position: absolute; 
    bottom: 50px; 
    left: 47%; 
} 
.left{ 
    position: absolute; 
    top: 45%; 
    left: 50px; 
 
} 
.right{ 
    position: absolute; 
    top: 45%;; 
    right: 50px;   
 
} 
span{ 
    cursor: pointer; 
} 
 
 
.page-moveUp { 
    animation: moveUp 3s ease both; 
  } 
@keyframes moveUp { 
	from {top:0px } 
	to {transform: translateY(-100vh); } 
} 
.page-moveDown{ 
    animation: moveDown 3s ease both; 
} 
@keyframes moveDown { 
    from{ transform: translateY(-100vh); } 
    /* to {transform: translateY(0); } */ 
    to{top:0px} 
} 
.page-moveLeft{ 
    animation: moveLeft 6s ease both; 
} 
@keyframes moveLeft { 
	from{transform: translateX(-100vw);} 
	to {transform: translateX(0);} 
} 
.page-moveRight{ 
    animation: moveRight 6s ease both; 
} 
@keyframes moveRight { 
	from{left:0} 
	to {transform: translateX(-100vw);} 
}

<div class="super-container"> 
    <div class="container1"> 
        <div class="page q page-visible"> 
            <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
        <div class="page a"> 
           <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
        <div class="page z"> 
            <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
    </div> 
    <div class="container2"> 
        <div class="page w"> 
            <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
        <div class="page s"> 
            <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
    </div> 
    <div class="container3"> 
            <div class="page x"> 
            <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
        <div class="page e"> 
            <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
        <div class="page d"> 
            <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
        <div class="page c"> 
            <span class="up btn-arrow-up">up</span> 
                <span class="left btn-arrow-left">left</span> 
                <span class="right btn-arrow-right">right</span> 
                <span class="down  btn-arrow-down">down</span> 
        </div> 
 
    </div> 
</div>