Нежелательное левое пространство с меню списка li

Question

Как правило, я придерживаюсь правильного меню для мобильной версии. Моя проблема заключается в том, что список нежелательных дополнений в левой части (вы можете видеть проложенную левую нижнюю границу), и мне трудно найти ошибку. Спасибо за ответы, вот код:

<nav> 
<div id="menubar"> 
    <a href="#" id="menu-icon"></a> 
    <ul> 
    <li><a href="#">Test 1</a></li> 
    <li><a href="#">Test 2</a></li> 
    <li><a href="#">Test 3</a></li> 
    <li><a href="#">Test 4</a></li> 
    </ul> 
</div> 

CSS:

#menu-icon { 
    display:inline-block; 
    width: 40px; 
    height: 40px; 
    float: right; 
    background: #364886 url(../Images/Interface/menu-icon.png) center; 
    } 
#menubar { 
    position: relative; 
    } 
ul { 
    list-style:none; 
    } 
ul a:visited, 
ul a:link, 
ul a:hover { 
    text-decoration: none; 
    color: white; 
    } 
nav ul, nav:active ul { 
    width: 90%; 
    display: none; 
    position: absolute; 
    background: #364886; 
    font-family: 'Roboto', sans-serif; 
    font-size: 12pt; 
    color: white; 
    right: 0px; 
    top: 24px; 
    } 
nav li { 
    text-align: center; 
    width: 100%; 
    padding: 10px 10px 10px 10px; /* top-right-bottom-left*/ 
    margin: 0; 
    border-bottom: 1px dotted white; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    } 
nav:hover ul { 
    display: block; 
    } 

Answer 1

Добавить утеплитель: 0 в ул уль { список-стиль: нет; прокладка: 0; }