Нижняя полоса прокрутки

Question

У меня вопрос. Почему я получаю эту нижнюю полосу прокрутки? Не могу по-настоящему понять. Я знаю, что могу ее удалить, но я не могу понять, почему она появляется. Требуется Hlp. https://codepen.io/anon/pen/oBjqxr

-HTML

<nav role="navigation"> 
    <div id="menuToggle"> 
    <!-- 
    A fake/hidden checkbox is used as click reciever, 
    so you can use the :checked selector on it. 
    --> 
    <input type="checkbox" /> 

    <!-- 
    Some spans to act as a hamburger. 

    They are acting like a real hamburger, 
    not that McDonalds stuff. 
    --> 
    <span></span> 
    <span></span> 
    <span></span> 

    <!-- 
    Too bad the menu has to be inside of the button 
    but hey, it's pure CSS magic. 
    --> 
    <ul id="menu"> 
     <a href="#"><li>Home</li></a> 
     <a href="#"><li>About</li></a> 
     <a href="#"><li>Info</li></a> 
     <a href="#"><li>Contact</li></a> 
     <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> 
    </ul> 
    </div> 
</nav> 

-CSS

body 
{ 
    margin: 0; 
    padding: 0; 

    /* make it look decent enough */ 
    background: #232323; 
    color: #cdcdcd; 
    font-family: "Avenir Next", "Avenir", sans-serif; 
} 

a 
{ 
    text-decoration: none; 
    color: #232323; 

    transition: color 0.3s ease; 
} 

a:hover 
{ 
    color: tomato; 
} 

#menuToggle 
{ 
    display: block; 
    position: relative; 
    top: 50px; 
    left: 50px; 

    z-index: 1; 

    -webkit-user-select: none; 
    user-select: none; 
} 

#menuToggle input 
{ 
    display: block; 
    width: 40px; 
    height: 32px; 
    position: absolute; 
    top: -7px; 
    left: -5px; 

    cursor: pointer; 

    opacity: 0; /* hide this */ 
    z-index: 2; /* and place it over the hamburger */ 

    -webkit-touch-callout: none; 
} 

/* 
* Just a quick hamburger 
*/ 
#menuToggle span 
{ 
    display: block; 
    width: 33px; 
    height: 4px; 
    margin-bottom: 5px; 
    position: relative; 

    background: #cdcdcd; 
    border-radius: 3px; 

    z-index: 1; 

    transform-origin: 4px 0px; 

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), 
       background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), 
       opacity 0.55s ease; 
} 

#menuToggle span:first-child 
{ 
    transform-origin: 0% 0%; 
} 

#menuToggle span:nth-last-child(2) 
{ 
    transform-origin: 0% 100%; 
} 

/* 
* Transform all the slices of hamburger 
* into a crossmark. 
*/ 
#menuToggle input:checked ~ span 
{ 
    opacity: 1; 
    transform: rotate(45deg) translate(-2px, -1px); 
    background: #232323; 
} 

/* 
* But let's hide the middle one. 
*/ 
#menuToggle input:checked ~ span:nth-last-child(3) 
{ 
    opacity: 0; 
    transform: rotate(0deg) scale(0.2, 0.2); 
} 

/* 
* Ohyeah and the last one should go the other direction 
*/ 
#menuToggle input:checked ~ span:nth-last-child(2) 
{ 
    opacity: 1; 
    transform: rotate(-45deg) translate(0, -1px); 
} 

/* 
* Make this absolute positioned 
* at the top left of the screen 
*/ 
#menu 
{ 
    position: absolute; 
    width: 300px; 
    margin: -100px 0 0 -50px; 
    padding: 50px; 
    padding-top: 125px; 

    background: #ededed; 
    list-style-type: none; 
    -webkit-font-smoothing: antialiased; 
    /* to stop flickering of text in safari */ 

    transform-origin: 0% 0%; 
    transform: translate(-100%, 0); 

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); 
} 

#menu li 
{ 
    padding: 10px 0; 
    font-size: 22px; 
} 

/* 
* And let's fade it in from the left 
*/ 
#menuToggle input:checked ~ ul 
{ 
    transform: scale(1.0, 1.0); 
    opacity: 1; 
} 

Answer 1

У вас есть position: relative; и left: 50px; на #menuToggle. Толкает #menuToggle 50px направо, за пределами окна. Вместо этого вы можете использовать поля для этого элемента. Удалить top, left и добавить margin: 50px 0 0 50px;

Answer 2

Добавление overflow-x: hidden; к body элемента будет удалить полосу прокрутки.

Я хотел бы удалить left: 50px; из #menuToggle, и добавить к padding-left: 50px;#menuToggle input и #menuToggle избежать скроллбар, проявляющейся в первую очередь.

Answer 3

Потому что вы установили

left: 50px; 

с #menuToggle. Поскольку это относительный позиционный элемент, он смещает div с 50pxs и создает полосу прокрутки. Заменить налево: 50 пикселей; с полем слева: 50px, и это должно исправить вашу проблему:

#menuToggle 
{ 
    display: block; 
    position: relative; 
    top: 50px; 
    margin-left: 50px;  
    z-index: 1;  
    -webkit-user-select: none; 
    user-select: none; 
} 

Answer 4

Вы должны использовать положение абсолютное вместо относительного.

position: absolute