无法在 CSS 和 HTML 中将我的文本徽标居中

Can't Center my text Logo in CSS and HTML

live demo on Codepen here

我无法确定我的错误并且搜索过但刚刚开始学习。

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav il {
    list-style: none;
    margin: 0 10px;
    padding 0;
}

nav li {
    display: inline-block;
}

nav a {
    font-weight: 800;
    padding: 15px 10px;
}

这是因为您的导航栏中的无序列表不在中心。它有一个左填充值。您可以使用

更正它
nav ul {padding: 0;}

或更具体地说

#logo + nav ul {padding: 0;}

或者你也可以

header nav ul {padding: 0;}

最后,您不必将所有填充设置为 0。您也可以只对上面列出的任何不同样式规则使用 padding-left: 0;

所有这些都是偏好。基本上是无序列表的填充导致了这个问题。