CSS - 侧边栏项目未对齐左侧

Question

我最近遇到了这个问题。

我有一个侧边栏，但当项目（li）应为left: 0时，差距为20px。
我几乎尝试了所有东西，将它对齐到左边。

我用红色标记了额外的空格。

如果我成功absolute，它会消失。

代码：

#navigation {
font-family: Source Sans Pro, Century Gothic;
font-size: 150%;
cursor: default;
color: #ba4d4d;
left: 0;
margin: 0;
}

#navigation li {
list-style: none;
margin: 0;
left: 0;
padding: 10px 0;
display: block;
width: 100%;
background: white;
border-bottom: 1px #E3E3E3 solid;
}

#navigation li a {
text-decoration: none;
color: inherit;
text-align: left;
}

.side-nav {
width: 15%;
left: 0;
top: 100%;
background-color: #3c3c3c;
float: left;
height: 100%;
}

HTML：

<nav class="side-nav">

    <ul id="navigation">
        <li>
            <a href="#etusivu">ETUSIVU</a>
        </li>

        <li>
            <a href="#tietoa">TIETOA MEISTÄ</a>
        </li>

        <li>
            <a href="#yhteys">YHTEYSTIEDOT</a>
        </li>
    </ul>

</nav>

Answer 1

我想你忘了试试这个：

#navigation{
  padding:0;
}

当ul保留默认20px页边距

时

Demo

Answer 2

这是因为UL有UA应用的默认填充。

强制填充为0，就像你为其他人做的那样标记（即LI）

#navigation
{
  padding:0;
}

Answer 3

首先从ul

中删除填充

ul{
padding:0;
}

之后给左边的一些填充到li

#navigation li{
padding-left:20px;
}