[CSS3] Unique Centered Navigation

[dday9]

I saw a horizontal navigation where there was the site's logo in-between the navigation's URLs, but it was not optimized for mobile use. So I decided to replicate it, making it better for mobile use:
HTML

<!-- header which encapulates the navigation -->
<div class="header">
  <ul>
    <li>
      <a href="#">Link 1</a>
    </li>
    <li>
      <a href="#">Link 2</a>
    </li>
    <li>
      <a href="#">Link 3</a>
    </li>
  </ul>
  <img alt="logo" src="#" />  
  <ul>
    <li>
      <a href="#">Link 4</a>
    </li>
    <li>
      <a href="#">Link 5</a>
    </li>
    <li>
      <a href="#">Link 6</a>
    </li>
  </ul>
</div>

CSS

/* body */
body {
  margin: 0;
  padding: 0;
}

/* header */
div.header {justify-content: center;}
div.header, div.header ul, div.header img {display: flex;}

div.header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

div.header ul li {margin: 1rem 0.5rem;}
div.header ul li a:hover, div.header ul li a:visited, div.header ul li a:link, div.header ul li a:active {text-decoration: none;}
div.header ul li a {color: #BA452A;}
div.header ul li a:hover {color: #2B4468;}

@media (max-width: 400px) {
  div.header, div.header ul, div.header img {flex-direction: column;}
  div.header img {
    align-self: center;
    order: -1;
  }
  div.header ul li {
    align-self: center;
    margin: 0.1rem 0;
  }
}

Demo: http://codepen.io/anon/pen/xqEpRw