中心响应式导航

Question

对于我的生活，我无法获得页面中心的列表项。任何人都可以伸出援手吗？我只想让六个li元素居中，直到它开始移动到移动。 JS小提琴：https://jsfiddle.net/qkre9v17/这是html：

<div class="header">
  <a href="index.html" class="logo"><img src="logo_ph.png" /></a>
  <div class="nav-collapse" id="nav">
    <ul>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Management</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">OUR ENVIRONMENT STORY</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Environment</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Social</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Economic</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Governance</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Company Profile</a>
      </li>
    </ul>
  </div>
</div>