offcanvas导航带有额外的空白区域

Question

我正在使用以下代码制作一个offcanvas div：

为我的代码道歉...有点新的stackoverflow。我的实时导航栏位于：http://inkfndry.webflow.io/artist-dashboard/artist-dash

空格的屏幕截图

HTML

<div id="container">
    <div id="canvas">
        <div id="nav">
        <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a>
</div>
</div>
</div>

CSS

#container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
#canvas {
width: 100%;
height: 100%;
position: relative;

-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-ms-transform:translateX(0);
 -o-transform:translateX(0);
    transform:translateX(0);

-webkit-transition:.5s ease all;
-moz-transition:.5s ease all;
 -o-transition:.5s ease all;
    transition:.5s ease all;
 }
#nav {
width: 20%;
height: 100%;
background: #ffffff;
position: absolute;
left: -20%;
top: 0;

-webkit-transition:.5s ease all;
-moz-transition:.5s ease all;
-o-transition:.5s ease all;
transition:.5s ease all;


 /* By default, rotate the menu 90deg inwards */
   -webkit-transform:rotateY(-90deg);
   -moz-transform:rotateY(-90deg);
    -ms-transform:rotateY(-90deg);
     -o-transform:rotateY(-90deg);
        transform:rotateY(-90deg);
    }



    #container.display-nav #canvas {
   -webkit-transform:translateX(300px);
   -moz-transform:translateX(300px);
    -ms-transform:translateX(300px);
     -o-transform:translateX(300px);
        transform:translateX(300px);
    }





    /* transition the menu with perspective on "show-nav" */
#container.display-nav #nav {
   -webkit-transform-origin:100% 50%;
   -moz-transform-origin:100% 50%;
    -ms-transform-origin:100% 50%;
     -o-transform-origin:100% 50%;
        transform-origin:100% 50%;





    -webkit-transform:perspective(600px) rotateY(0deg);
   -moz-transform:perspective(600px) rotateY(0deg);
    -ms-transform:perspective(600px) rotateY(0deg);
     -o-transform:perspective(600px) rotateY(0deg);
        transform:perspective(600px) rotateY(0deg);
    }

Jquery（切换导航）

// Calling the function
$(function() {
    $('.toggle-nav').click(function() {
        toggleNavigation();
    });
});

// The toggleNav function itself
 function toggleNavigation() {
    if ($('#container').hasClass('display-nav')) {
        // Close Nav
    $('#container').removeClass('display-nav');
    } else {
        // Open Nav
        $('#container').addClass('display-nav');
    }
}