Удаление пробелов с конца навигационной панели

У меня есть панель навигации с четырьмя ссылками. Я хочу убрать лишнее пространство слева от «Проекты» и справа от «Контакты». Кажется, что это часть неупорядоченного списка, а не отступ или поле.

Вот скрипка http://jsfiddle.net/95g12kpe/

 <nav class="navbar">
  <div class="container">
    <ul class="navbar-list">
      <li><a href="#projects">Projects</a></li>
      <li><a href="#schedule">Schedule</a></li>
      <li><a href="#FAQ">FAQ</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

.navbar {
/*position: fixed;*/
top: 0;
left: 0;
z-index: 9999;
padding: 0;
text-align: center;
}

.navbar ul {
    list-style: none;
    background-color: #fff;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-left: -4px;
    margin-right: -4px;
}

.navbar li {
    position: relative;
    display: inline;
    margin-bottom: 0;
    margin-left: -20px;
}

.navbar li:hover {
    color: #000033;
}

.navbar a {
    display: inline-block;
    padding-right: 25px;
    padding-left: 25px;
    text-decoration: none;
    line-height: 6.5rem;
    color: #222;
    font-size: 1.6rem;
    font-weight: 600;
}

.navbar a:hover {
    color: #006699;
    background-color: #000033;
}