title: Navigation Bar changes based on window size?
body: <p>I am running media queries in my overall document, but here I just want to explain what's going on. Is it possible to get this menu to stay centred no matter what device it's on? So when there isn't enough room to allow all menu items to stay on one line, it puts the rest on the line below but then <strong>centres</strong> those on the screen, rather than starting a new line from the left? It probably has something to do with my float left on the menu but that's the only way I can keep them horizontal for my scroll bar. Thank you.</p>
  
  <p>HTML and CSS below but I recommend viewing it on JSFiddle: <a href="https://jsfiddle.net/rt518s7p/" rel="nofollow noreferrer">https://jsfiddle.net/rt518s7p/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="page-navigation"&gt;
        &lt;ul&gt;
              &lt;li&gt;&lt;a href="../../index.html" title="Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;ul class="top-menu"&gt;
                      &lt;li&gt;&lt;a href="../../_portfolio/photography.html" onclick="return false"&gt;Photography&lt;/a&gt;
                      &lt;ul class="sub-menu"&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_photography/bmc-himley-mini-show-2015.html"&gt;BMC Himley Mini Show 2015&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_photography/kinver-snow.html"&gt;Kinver Snow&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_photography/mini-runs-collection.html"&gt;"Mini Runs" Collection&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_photography/hofner-bass.html"&gt;Hofner Bass&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_photography/nature.html"&gt;Nature&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_photography/haynes-motor-museum.html"&gt;Haynes Motor Museum&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_photography/miscellaneous.html"&gt;Miscellaneous&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_photography/classic-mini.html"&gt;Classic Mini&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                      &lt;li&gt;&lt;a href="../../_portfolio/graphic-design.html" onclick="return false"&gt;Graphic Design&lt;/a&gt;
                      &lt;ul class="sub-menu"&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_graphic-design/story-bag-artwork.html"&gt;"Story Bag" Artwork&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_graphic-design/business-cards.html"&gt;Business Cards&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_graphic-design/logo-design.html"&gt;Logo Design&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_graphic-design/the-mexican-job.html"&gt;"The Mexican Job"&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_graphic-design/magazine-covers.html"&gt;Magazine Covers&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_graphic-design/wpap-artwork.html"&gt;WPAP Artwork&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="../../_portfolio/_graphic-design/lyric-posters.html"&gt;Lyrics Posters&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                      &lt;li&gt;&lt;a href="../../_portfolio/3d-modelling.html"&gt;3D Modelling&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;li&gt;&lt;a href="../../about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="../../recognition.html"&gt;Recognition&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    /*navigation*/
  #page-navigation
  {
      width: 70%;
      height: 53px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px;
  }
  
  #page-navigation ul li
  {
      color: white;
      list-style: none;
      background-color: darkslategray;
      width: 9em;
      float: left;
  }
  
  li
  {
      position: relative;
  }
  
  li.title
  {
      display: none;   
  }
  
  li a
  {
      display: block;
      color: white;
      line-height: 1.3em;
      padding: 1em;
      text-align: center;
  }
  
  li a:link
  {
      text-decoration: none;
  }
  
  li a:visited
  {
      text-decoration: none;
      color: white;
  }
  
  li a:hover, .top-menu &gt; li:hover &gt; a
  {
      background-color: rgb(48,48,48);
  }
  
  li a:active
  {
      background-color: dimgray;
  }
  
  ul.sub-menu
  {
      width: auto;
      height: auto;
      position: absolute;
      left: -9000em;
      overflow: hidden;
  }
  
  ul.sub-menu li
  {
      clear: left;
      float: none;
      margin-left: -2.5em;
      z-index: 1000;
  }
  
  .top-menu li:hover ul
  {
      left: 0;
  }
  
  ul.sub-menu li a
  {
      height: auto;
      border-bottom: 1px solid gray;
      padding: .4em 1em;
      background-color: dimgray;
      padding-top: 1em;
      padding-bottom: 1em;
  }
  
  ul.sub-menu li:last-child a
  {
      border-bottom: none;
  }
  
  ul.sub-menu li a:hover
  {
      background-color: darkslategray;
  }
  
  ul.sub-menu li a:active
  {
      background-color: gray;
  }
  
  ul.top-menu
  {
      padding: 0;   
  }
  </code></pre>