Html ul自动缩进以及仅在一侧焊盘？

我知道有很多关于ul自动缩进的问题，我尝试了很多答案，但都没有成功。我还有一个问题，当添加一个带有填充物的容器时，它似乎只填充了一面

基本上，我想在窗户底部安装一个ul条。该条位于容器（主）内，用于从窗口两侧填充。它设计为随窗口宽度（液体）自动扩展，因此在初始宽度=设备宽度之外没有定义的宽度

当自己写的时候，我在ul的左边有一个小的自动缩进。我尝试过在ul和li元素中添加0填充和边距，这似乎没有其他元素的效果。当我在容器中添加时，它似乎只在有缩进问题的一侧填充。我相信这是件简单而愚蠢的事情，但我感谢任何帮助

作为旁白。。li元素的宽度为33.3%，这是由于使用了stackoverflow上的间隔框。在这个问题上，它的使用不会改变/帮助/伤害任何东西，所以我省略了它，以使这个问题更简单

JSFIDLE链路

HTML

---

这来自浏览器的内置样式表。如果你加上

body {
    margin: 0;
}

额外的小空间消失了

---

另一种选择是，当您在

Fiddle Options

下检查

Normalized CSS

时，您会得到类似的结果，填充来自包含

ul

与@ExplosionPills一致的div。正如我提到的，

1em

，div只是增加了问题。我可能应该把它漏掉。您仍然可以看到ul左侧的一个小缩进，我无法消除。填充物不应该同时影响两边吗？在这种情况下，它只影响“问题”（左）边？这在小提琴和实践中都解决了它。谢谢你，好先生，非常感谢。（编辑：一旦我获得了足够的声誉，我会投票给你，再次感谢你。）

.main{
    width: 100%;
    padding: 0 1em;
}
nav{
    position: fixed;
    bottom: 0px;
    background: #455868;
    width: 100%;
    z-index: 1000;
}
nav ul {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
nav li{
    position: relative;
    float: left;
    width: 33.3%;
    text-align: center;
    background: #455868;
    padding: 0;
    margin: 0;
}
nav li a{
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 15px 0;
}

body {
    margin: 0;
}