title: Move Anchor tag to centre of navigation bar
body: <p>I am trying to move the Anchor tags in the navigation to the center of the bar, How can I make it that the Anchors will remain fixed and not change position in different screens? My code is below:</p>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;nav class = "nav-main" id = "navMain"&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;
                    &lt;a href = "#" class = "nav-item"&gt; HOME&lt;/a&gt;                              
                  &lt;/li&gt;
                  &lt;li&gt;
                     &lt;a href = "#" class = "nav-item"&gt;ABOUT US &lt;/a&gt;
                  &lt;/li&gt;
  
                   &lt;li&gt;
                     &lt;a href = "#" class = "nav-item"&gt;PORTFOLIO &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                     &lt;a href = "#" class = "nav-item"&gt;SERVICES &lt;/a&gt;
                  &lt;/li&gt;
                    &lt;li&gt;
                     &lt;a href = "#" class = "nav-item"&gt;CONTACT US &lt;/a&gt;
                  &lt;/li&gt;
  
            &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    .nav-main {
      width:100%;
      background-color: #222;
      height:70px;
      color:#fff;
  }
  
  
  
  
  .nav-main .logo{
    float:left;
      height:40px;
      padding:15px 30px;
      font-size: 1.4em;
      line-height: 40px;
  }
  
  
  .nav-main &gt; ul {
  
      margin:0;
      float:left;
      list-style-type: none;
  }
  
  .nav-main &gt; ul &gt; li {
  
      float:left;
      padding-left: 10px;
  
  }
  
  .nav-main &gt; ul &gt; li &gt; a {
  
      text-decoration: none;
      text-align: center;
      padding-left:100px;
  }
  
  
      .nav-item {
      display:inline-block;
      padding:15px 20px;
      height:40px;
      line-height:40px;
      color:#fff;
      text-decoration:none;   
  }
  
  .nav-item:hover {
  
      background-color:forestgreen;
  
  }
  </code></pre>
  
  <p><strong>JS FIDDLE</strong></p>
  
  <p><a href="https://jsfiddle.net/x45wqktz/" rel="nofollow">https://jsfiddle.net/x45wqktz/</a></p>
  
  <p>I used text-align : center but no result. Right its on the left side of the bar.</p>