Странное поведение меню (если вытягивать разметку в строку) через pdoMenu, почему?

Question

Виктор Янышев @villiwalla

HTML-верстка

CSS
MODX

Странное поведение меню (если вытягивать разметку в строку) через pdoMenu, почему?

Так выглядит меню в верстке:

<nav>
	<ul class="nav">
		<li class="nav--item nav--item_active">
			<a class="nav--link" href="index.html">Main page</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="about.html">About</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Partnership</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Research</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Innovations</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Production</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Distributors</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Education</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="news.html">News</a>
		</li>
		<li class="nav--item">
			<a class="nav--link" href="index.html">Contacts</a>
		</li>
	</ul>
</nav>

Стили меню:

.main-nav-wrapper {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 15px; }

.nav {
  height: 42px;
  padding-left: 0;
  position: relative;
  text-align: justify;
  margin-top: 10px;
  font-size: 17px; }
  .nav:after {
    content: "";
    display: inline-block;
    font-size: 0;
    line-height: 0;
    text-align: justify;
    width: 100%; }
  .nav--item {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    position: relative;
    text-align: justify;
    vertical-align: middle;
    border-bottom: 3px solid transparent;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s; }
    .nav--item:hover {
      border-bottom: 3px solid #2FB56D; }
    .nav--item_active {
      border-bottom: 3px solid #2FB56D; }
  .nav--link {
    display: block;
    padding: 9px 0;
    color: #000000;
    text-decoration: none;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s; }
    .nav--link:hover {
      text-decoration: none;
      color: #2FB56D; }

.nav--item_active .nav--link {
  color: #2FB56D; }

Всё вроде бы хорошо, но вот вывод через pdoMenu, все пункты меню прижимаются к левому краю (первое меню это вывод pdoMenu, второй просто статика из шаблона):

https://jsfiddle.net/rrneqasy/ Если начать вытягивать в строку (https://jsfiddle.net/ea7jhrjy/) меню сбивается в левом крае, почему?