Anchor-Tag in die Mitte der Navigationsleiste verschieben

Question

Ich versuche, die Anchor-Tags in der Navigation zur Mitte der Leiste zu verschieben. Wie kann ich dafür sorgen, dass die Anchors fixiert bleiben und ihre Position nicht in verschiedenen Bildschirmen ändern? Mein Code ist unten:

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/

Ich habe text-align: center, aber kein Ergebnis. Rechts ist es auf der linken Seite der Bar.

Answer 1

In der nav-Hauptklasse diese Eigenschaft:

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

Answer 2

Der Text scheint bereits zentriert zu sein. Der einzige Weg, den der Text nicht zentriert ist, ist, wenn Sie die Fenstergröße sehr klein machen, und dann müssen Sie die Navigationsleiste so erstellen, dass sie reagiert. Ich würde mehr über @media Tag lesen: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp