Align <ul> <li> elements to the left - css

Question

I'm having trouble aligning li elements to the left on tabs, as they are centered. I was wondering if someone could help me out.
I've tried a few things but always end up breaking the code.
Also, as a plus, the effects for fadein on divs don't seem to work on opera and firefox.
Here's the jsfiddle: http://jsfiddle.net/guisasso/6f6PY/
CSS
.tabs {
border-bottom:3px #f2f2f2 solid;
}
.tabs li {
list-style:none;
display:inline;
color:#08c;
}
.tabs a {
padding:5px 20px;
display:inline-block;
background:#ffffff;
text-decoration:none;
color:#08c;
top: 3px;
font-size: 22px;
line-height: 140%;
padding-top: 10px;
background: #ffffff;
box-sizing: border-box;
position: relative;
border-radius: 4px 4px 0 0;
margin-bottom:3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs a.active {
background: #ffffff;
border-bottom:3px orange solid;
color:#000000;
top:0px;
}
.tabs a:hover {
background: #f2f2f2;
top: 0px;
border-bottom:3px orange solid;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#tab1, #tab2, #tab3, #tab4 {
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
-o-animation: fadein 1s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
HTML
<ul class="tabs">
<li><a href='#tab1'>Tab #1</a></li>
<li><a href='#tab2'>Tab #2</a></li>
<li><a href='#tab3'>Tab #3</a></li>
<li><a href='#tab4'>Tab #4</a></li>
</ul>
<div id="tab1">111111111111111 11111111111111111 1111111111111111111 1111111111111</div>
<div id="tab2">222222222222222 22222222222222222 2222222222222222222 2222222222222</div>
<div id="tab3">333333333333333 33333333333333333 3333333333333333333 3333333333333</div>
<div id="tab4">444444444444444 44444444444444444 4444444444444444444 4444444444444</div>
Thanks

Answer 1

Add to .tabs:
padding-left: 0;
Change in .tabs a:
padding: 5px 20px;
to
padding: 5px 20px 5px 0;
It doesn't get any lefter than that.
Fiddle: http://jsfiddle.net/PRL5H/