Center responsive navigation

Question

For the life of me I can't get the list items centered in the page. Can anyone lend a hand? I just want the six li elements centered until it kicks over to mobile. JS fiddle: https://jsfiddle.net/qkre9v17/ Here's the 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>