Align list item to the left in unordered list

Question

I have the following html and css:

HTML:

<div id="wrapper">
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</div>

CSS:

#wrapper
{
}

#wrapper ul
{
    width:50px;
    height:100px;
    border-style:solid;
    border-width:1px;
    list-style-type:none;
}

#wrapper ul li
{
    border-style:solid;
    border-width:1px;   
}

Which results in the following unordered list:

How do I align the list-items to the left in the unordered list?

I've tried float and margin in the "#wrapper ul li", but that doesn't solve the problem..

Answer 1

Your unordered list markers need to be put outside:

#wrapper ul {
    list-style-type: none;
    list-style-position: outside;
}

Answer 2

Add a padding-left: 0pt to the #wrapper ul block:

#wrapper ul
{
    width:50px;
    height:100px;
    border-style:solid;
    border-width:1px;
    list-style-type:none;
    ' CHECK THE NEXT LINE '
    padding-left: 0pt;
}