Значок гамбургера в отзывчивой навигационной панели не работает должным образом

Question

Когда моя панель навигации просматривается в размере планшета / мобильного устройства и щелкается значок гамбургера, она переходит влево, и под моими навигационными вкладками появляется странный "пробел". Можете ли вы помочь мне решить эту проблему? Я впервые задаю здесь вопрос и пишу HTML... заранее спасибо

/* NAVIGATION MENU */
.icon img {
 margin-top: 2.5px;
}

.navbar {
 padding-left: 0%;
 background-color: #454242;
 text-align:center;
}

ul.menu {
 height: 43px;
 background-color: #454242;
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 transiton: 1.0s;
 font-family: "Gill Sans", Helvetica, Arial, sans-serif;
 display:inline-block;
 text-align: center;
}

ul.menu li {
 float: left;
 display: inline;
}

ul.menu li a {
 display: inline-block;
 color: #FFFFFF;
 text-align: center;
 padding: 10px 20px;
 text-decoration: none;
 transition: 0.5s;
 font-size: 17px;
 height: 23px;
}

ul.menu li a:hover {
 background-color: #FFFFFF;
 color: black;
}

ul.menu li a:active {
 background-color: #FFFFFF;
 color: black;
}

ul.menu li.icon {
 display:none;
}

@media screen and (max-width: 680px) { 
ul.menu li:not(:first-child){
 display:none;
 margin: auto;
 float: left;
}
 
ul.menu li.icon {
 display: inline;
 float: left;
 position: absolute;
 left: 0px;
 text-align: left;
}
}

@media screen and (max-width: 680px) {
.navbar {
 padding-left: 0%;
}
 
ul.menu.responsive li.icon {
 
 float: left;
 position: absolute;
 left: -10px;
 text-align: left;
 color: black;
}
 
ul.menu.responsive{
 position: relative;
 height: 258px;
 transition: 1.0s;
 width: 100%
}
 
ul.menu.responsive li{
 float: none;
 display: inline;
} 
ul.menu.responsive li a{
 display:block;
 text-align: center;
} 
}

<!--NAVIGATION BAR-->
<div class="navigation col-12">
<div class="navbar">
<ul class="menu">
<li class="icon">
<a href="javascript:void(0);"onClick="dropdownMenu()">&#9776;</a></li>
<li> <a href="test.html">Home</a></li>
<li> <a href="test.html">Eat</a></li>
<li> <a href="test.html">Shop</a></li>
<li> <a href="test.html">Discover</a></li>
<li> <a href="test.html">Edge Club</a></li>
<li> <a href="test.html">Contact</a></li>
</ul>
</div>
</div>

<script>
function dropdownMenu() {
 document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}
</script>

Answer 1

ul.menu.responsive li.icon {

    float: left;
    position: absolute;
    /* left: -10px; */ REMOVE
    text-align: left;
    color: black;
    }