title: Text not horizontally centre in nav bar / How to make a <br> half the size/ Too much space between nav bar text
body: <p>Here I have my website: <a href="http://gyazo.com/56e069ebf8b5bd61ee30523886180b88" rel="nofollow">http://gyazo.com/56e069ebf8b5bd61ee30523886180b88</a></p>
  
  <p>There are a number of issues with the nav bar.</p>
  
  <ol>
  <li><p>You can see that the text or nav bar is not horizontally centered, as indicated by the hover (which is equal on top and bottom)</p></li>
  <li><p>There is to much space in between the text, (and this spacing is the only way I've found works without the text moving around when highlighting or hovering.</p></li>
  <li><p>The &lt;.br> spacing on the drop down menu is too spaced apart.</p></li>
  </ol>
  
  <p>So for 1. is there a way I can make the text or the nav bar (not sure what is the cause) centre so the hover looks more equal (horizontally)</p>
  
  <p>For 2. Is there a way I can close the gap between the text, while still keeping the same padding settings, and so it doesn't move the text around when I use the hover function.</p>
  
  <p>And 3. Is there a way to make the &lt;.br> have half the space it currently uses</p>
  
  <p>I've also added a jsfiddle if that helps: <a href="http://jsfiddle.net/d1a5eshs/" rel="nofollow">http://jsfiddle.net/d1a5eshs/</a></p>
  
  <p>HTML code for the nav bar:</p>
  
  <pre><code>&lt;!--TOP NAV BAR SECTION--&gt;
              &lt;div id="nav_bar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="status.html"&gt;STATUS&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="info.html"&gt;INFO&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;GAMEMODES&lt;/a&gt;
  
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="survival.html"&gt;SURVIVAL&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;br&gt;&lt;a href="pure-pvp.html"&gt;PURE-PVP&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;br&gt;&lt;a href="gamesworld.html"&gt;GAMESWORLD&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="rules.html"&gt;RULES&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="vote.html"&gt;VOTE&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS for the nav bar:</p>
  
  <pre><code>/*TOP NAV BAR SECTION*/
  #nav_bar {
      background-color: #a22b2f;
      padding:1px;
      box-shadow: 0px 2px 10px;
      height:45px;
      }         
  #nav_bar ul li {
      display: inline-block;    
  }
  #nav_bar ul li a {
      color: white;
      text-decoration:none;
      font-weight:bold;
      font-size:15px;
      margin-left:10px;
      padding-bottom:13px;
      padding-top:17px;
      padding-left:10px;
      padding-right:10px;
      margin-bottom:30px;
  }
  #nav_bar ul li ul {
      display: none;   
  }
  #nav_bar&gt;ul&gt;li&gt;a:hover {
      background:#8c1b1f;
      padding-bottom:13px;
      padding-top:13px;
      padding-left:10px;
      padding-right:10px;   
  }
  #nav_bar&gt;ul&gt;li&gt;ul&gt;li&gt;a:hover {
      background:#c9c9c9;
      padding-bottom:5px;
      padding-top:5px;
      padding-left:5px;
      padding-right:5px;      
  }
  #nav_bar ul li:hover ul {
      display: block;
      position: absolute;
      padding: 0px;
      background: #e2e2e2;
      padding-top:10px;
      padding-bottom:10px;
      padding-left:0px;
      padding-right:10px;
      border: 1px solid black;
      border-radius:5px;
  }
  #nav_bar ul li:hover ul li {
      display: block;
  
  }
  #nav_bar ul li:hover ul li a {
      color: black;
      font-size:12px;
      font-weight:bol;
      margin-left:-20px;
      padding-bottom:5px;
      padding-top:5px;
      padding-left:5px;
      padding-right:5px;
  }
  </code></pre>