CSS - Sidebar items not aligning to left

Question

I've recently had this problem.

I got a sidebar, but when the items ( li ) should be left: 0 there's a gap of 20px.
I've tried almost everything to align it to the left.

I've marked the extra space with red.

If I make it absolute , it dissapears.

Code :

#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

I think you forgot to try this:

#navigation{
  padding:0;
}

As ul s leave default 20px margins

Demo

Answer 2

This happens because UL has a default padding applied by UA.

Force padding to 0, like you made for others tag (ie LI)

#navigation
{
  padding:0;
}

Answer 3

first remove padding from ul

ul{
padding:0;
}

after that give some padding from left to li

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