h1不会居中对齐

Question

我已将h1“我们的品牌”设置为居中对齐，但它偏离中心稍微偏右。为什么会这样？

https://codepen.io/fjenpen/pen/pROPov

body {
    background-image: url("http://media.istockphoto.com/photos/repairing-lawn-   mower-engine-picture-id500782948");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    text-align: center;
    text decoration: none;
    color: #ffffff;
    font-family: arial;
}

h1 {
    text-transform: uppercase;
    color: #ffffff;
}

Answer 1

查看更新的codepen。关键是以下几行：

ul {
    padding-left: 0
}

＆＃34;我们的品牌＆＃34;文本包含在ul#menu内，自动获取一些填充。你需要清除它。

Answer 2

您的ul有默认padding-left。将其更新为padding-left: 0;，文字将位于中心位置。

Answer 3

从ul标记中删除填充：

 <ul id="menu" style="list-style-type: none;padding:0px;margin:0px;">