title: How to make a navigation bar have equal spacing?
body: <p>I'm not sure how to ask this question exactly but I'm making a navigation bar using HTML and CSS with unordered list.</p>
  
  <p>As shown in the picture below, the spacing for example between Home and About Us tab is not the same as the spacing between Contact Us and Get Involved.</p>
  
  <p><a href="https://imgur.com/a/vIB2u" rel="nofollow noreferrer">http://imgur.com/a/vIB2u</a></p>
  
  <p>My CSS code for my navigation bar is as below,</p>
  
  <pre><code>.nav {
      width:898px;
  }
  
  .nav ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  
  .nav li {
      font-family: 'Roboto', sans-serif;
      width: 149.6666666px;
      border-bottom: none;
      height: 106px;
      line-height: 106px;
      font-size: 14px;
      display: inline-block;
      float:left;
      margin: 0 auto;
  }
  
  .nav a {
    text-decoration: none;
    color:#000000;
    display: block;
    transition: .3s background-color;
  }
  
  .nav a:hover {
    background-color: #5c89c7;
    color:#FFFFFF;
  }
  </code></pre>