title: How do I centre my navigation for just mobile devices? CSS
body: <p>For the computer I have the navigation set on the left, but for the phone I would like it to be centred in the display. Any ideas what I'm doing wrong?</p>
  
  <p><em>html file</em></p>
  
  <pre><code>    &lt;div id="topNav"&gt;
      &lt;nav class="navigation" role="navigation"
      &lt;ul&gt;
          &lt;li class="Work"&gt;
              &lt;a href="Work.html"&gt;Work&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="About"&gt;
              &lt;a href="About.html"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="Contact"&gt;
              &lt;a href="Contact.html"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><em>Css file:</em></p>
  
  <pre><code>    topNav
      {
      display:block;
      }
  
      ul,li
      {
      list-style-type: none!important;
      font-family: 'PT Sans', Arial, sans-serif;
      display: block;
      max-width: 95%;
      margin-left: 5%;
      margin-top: 6%;
      font-size:25px;
      font-style: normal;
      font-weight: 100;
      line-height: 1%;
      letter-spacing: -1px;
      float:left;
      }
  
      /* iphone */
      @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      topNav {
      display: inline-block;
      vertical-align: middle;
        }
      }
  </code></pre>
  
  <p>I'm very new to this so it's like trying to speak a language i don't understand. So thanks for the help in advance, </p>
  
  <p>Have a good day!</p>