Html 基础顶部导航条：增加宽度

我正在使用

Zurb Foundation

制作一个带有以下代码的导航栏：

<div class="off-canvas-wrap full-height">
    <div class="inner-wrap full-height">
        <!---Top Bar for Large up-->
        <nav class="top-bar docs-bar show-for-large-up" data-topbar="">
            <section  class="top-bar-section">
                <ul>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                </ul>
            </section> 
        </nav>

      <!--blah blah blah more code-->
    </div>
</div>

上述结果产生以下

导航条

：

---

我希望保持

导航元素居中，但分布更广（即导航条当前
440px宽
，但我希望它在
1200px
上均匀分布。如何更改宽度？
如果这是一组元素，为什么不将它们的宽度设置为百分比

.top-bar-section ul{
    width:100%;
}
.top-bar-section ul li{
    width:14.43% /* 100/7 */
}
.top-bar-section ul li a{
    width:100%;
}

请将您的CSS添加到问题中，以便我们提供帮助。因此，如果将其分布在1200px上，问题更多的是路径问题？如果我将导航宽度硬编码为1200px，导航元素将保持相同的小尺寸，并且不居中。我不想硬编码导航宽度，因为我仍然希望导航条具有响应性
.top-bar-section ul{
    width:100%;
}
.top-bar-section ul li{
    width:14.43% /* 100/7 */
}
.top-bar-section ul li a{
    width:100%;
}