Css 更改菜单栏宽度

我正在尝试将菜单栏居中，并使菜单栏适合文本。 以下是我正在尝试编辑的网站：

我已经发现，我可以通过以下方式将菜单项居中：

.menu {
    text-align:center
}
.menu li {
    display:inline-block;
    float:none;
    margin-left: -5px;
}
.menu li li {
    display:block;
    text-align:left
}

但我似乎无法使菜单栏与菜单项的宽度相匹配。 我已经计算出它应该是445倍长，但是当我改变这个时：

#container {
    margin: 0 auto;
    max-width: 960px;

对于445px，它影响的是整个页面，而不仅仅是菜单栏。

---

有没有办法解决这个问题？

你可以做得非常类似：）。

显示的效果之一：内联块是指元素尝试调整自身大小以包含其子元素。您也可以使用
float
或
position:absolute
来实现这一点，但它们并不真正适合此布局

.main-nav { text-align: center; }
.menu { display: inline-block; }

我猜您可能想将菜单居中，因此我也添加了
文本对齐

提示：如果您使用浏览器的检查器（所有现代浏览器都有一个相当不错的检查器），您可以很容易地找出需要更改的元素。
当我查看您的页面时，您真正需要更改的部分似乎是“主导航”类

#container div包含您的整个页面，因此您不想弄乱它。
感谢您快速回复bažmegakapa。我已经尝试将你的行添加到css中，但是页面看起来是一样的。我将这一行替换为
。main nav{clear:both；}
。main nav{text align:center；}

并添加了

。菜单{显示：内联块；}

我做错了什么？@AlešKroutil如果不看到它的运行，很难判断。你能发布一些演示吗？我在Wordpress主题设置中的自定义CSS样式字段中添加了

.main nav{text align:center；}.menu{display:inline block；}

。您可以在浏览器的inspector中看到@AlešKroutil Check的作用。另一个规则是覆盖

.menu

规则，因为它更强大：

.js.main nav.menu{display:block；}

。去掉这个，一切都好。