Unwanted left space with li list menu

Question

Generally I'm stuck to do the proper menu for mobile version. My problem is the list unwanted padding in the left (you can see padded left bottom border) and it is hard for me to find the mistake. Thanks for answers, here is the code:

<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

Add padding:0 in ul ul { list-style:none; padding:0; }