Sidebar list is getting pushed to the right - html

Question

I have a page that has a dark grey sidebar that has a ul in it that is holding some navigation. Currently the UL is getting pushed over within the side bar.
Fiddle: http://jsfiddle.net/PWZJd/
I would like the UL to be pressed up against the left side of the sidebar. Then I can add some padding to move it over as I see fit.
HTML:
<div class="content">
<header id="myNav" class="top_block navbar-fixed-top" >
<ul>
<li>Home</li>
<li>4Tell</li>
<li>Console 1</li>
<li>Console 2</li>
<li>About</li>
</ul>
</header>
<aside class="background sidebar">
<div class="sidenav">
<ul class="menu side-menu">
<li>NCR at your service</li>
<ul class="sub-menu">
<li>My Support Link</li>
<li>My Asset List</li>
<li>My Invoices</li>
<li>My Somthing Else</li>
</ul>
<li>Q2C MAC</li>
<ul class="sub-menu">
<li>Move</li>
<li>Add</li>
<li>Change</li>
<li>Swap</li>
</ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</aside>
<div class="left_block sidebar">
</div>
<div class="bottom_block footer">
<p class="text-center">Designed by Steve Wilson <br>With contributions from Alex Cronon and Robert Moua</p>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content {
min-height: 100%;
position: relative;
overflow: auto;
z-index: 0;
}
.background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.top_block {
width: 100%;
display: block;
}
.bottom_block {
position: absolute;
width: 100%;
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
}
.background.sidebar {
height: auto !important;
padding-bottom: 0;
left: 0;
width: 200px;
background-color: #33404c;
margin-top: 50px;
margin-bottom: 50px;
border-right: 1px solid;
}
.sidebar {
height: auto;
width: 20%;
padding-bottom: 75px;
}
.footer {
width: 100%;
height: 50px;
background-color: #e3e6ea;
padding-top: 5px;
}
.sidenav {
margin-top: 10px;
color: #f9fafb;
}
.side-menu {
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
list-style: none;
line-height: 2em;
}
*Note: I have cut some of the code for Stack Overflow, see the fiddle for a more complete version.

Answer 1

adjust the padding and margin on your side-menu to 0.
See: http://jsfiddle.net/PWZJd/2/

Answer 2

The default padding on the ul element is what's moving it to the right. Just update the padding and you can dock the ul up against the left side of the side-bar as close as you want.
Demo: http://jsfiddle.net/PWZJd/3/