html - 将 anchor 标记移到导航栏的中心

我正在尝试将导航中的“锚点”标签移动到栏的中央，如何使“锚点”保持不变，而不在其他屏幕中更改位置？我的代码如下：

HTML代码

<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菲德尔

https://jsfiddle.net/x45wqktz/

我使用text-align：center但没有结果。右侧位于栏的左侧。

最佳答案

将这个属性添加到nav-main类中：

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