Move Anchor tag to centre of navigation bar

Question

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:

HTML CODE

<nav class = "nav-main" id = "navMain">

            <ul>
                <li>
                  <a href = "#" class = "nav-item"> HOME</a>                              
                </li>
                <li>
                   <a href = "#" class = "nav-item">ABOUT US </a>
                </li>

                 <li>
                   <a href = "#" class = "nav-item">PORTFOLIO </a>
                </li>

                <li>
                   <a href = "#" class = "nav-item">SERVICES </a>
                </li>
                  <li>
                   <a href = "#" class = "nav-item">CONTACT US </a>
                </li>

          </ul>
    </nav>

CSS

    .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 > ul {

    margin:0;
    float:left;
    list-style-type: none;
}

.nav-main > ul > li {

    float:left;
    padding-left: 10px;

}

.nav-main > ul > li > 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;

}

JS FIDDLE

https://jsfiddle.net/x45wqktz/

I used text-align : center but no result. Right its on the left side of the bar.

Answer 1

Add to nav-main class this property:

.nav-main {
   width:100%;
   background-color: #222;
   height:70px;
   color:#fff;
   display: flex;
   justify-content: center;
}