Css list problem

Question

How can I fix my css list problem form text displaying like this inside a div tag.

# ordered lists - the 
list items are marked with numbers or letters

To display like this when inside a div tag.

# ordered lists - the 
  list items are marked with numbers or letters.

here is the html.

        <div>
            <h2>header</h2>
                <ul>
                    <li>ordered lists - the list items are marked with numbers or letters</li>
                    <li>ordered lists - the list items are marked with numbers or letters</li>
                </ul>
        </div>

CSS.

div {
    margin: 0px 0px 15px 0px;
    padding: 0px 0px 5px 0px;
    background: #fff;
    float: right;
    width: 302px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 3px solid #fff;
}

div h2 {
    text-indent: 10px;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    font-size: 1.4em;
    width: 302px;
    color: #fFF;
    border-bottom: 1px dotted #fff;
}

div ul {
    padding: 0px;
    margin: 0px;
    line-height: 20px;
    width: 308px;
}

div li {
    list-style-position: inside;
    border-bottom: 1px solid #fff;
    padding: 5px 10px;
    margin: 0px;
    width: 282px;
    color: #ffffff;
}

Answer 1

div > ul { 
  list-style-position: outside;
  margin-left: 20px;
}

Answer 2

The first one is list-style-position: inside, the other one is list-style-position: outisde and some padding.

Answer 3

combine Unorder and order list like as below will do the thing you want

 <UL>
      <LH>Table Fruit</LH>
      <LI>apples
      <LI>oranges
      <LI>bananas
      <ol>
             <li>Coffee</li>
             <li>Milk</li>
         </ol>
</UL>