List doesn't show correctly in DIV element

I have a div element which has these css attributes :

HTML

<div class="messageContainer"></div>

CSS

.messageContainer {
  margin-left: 2px;
  background-color: #F7F5F2;
  width: 100%;
  min-height: 50px;
  border: solid 1px silver;
  padding-left: 5px;
  margin-top: 3px;
}

When putting this html portion inside the div element :

Please do the things respectively: 
<ol>
   <li>
      Creat开发者_StackOverflow中文版e button control
   </li>
   <li>
      Assign it to the main user
   </li> 
   <li>
      Let me know what happened
   </li>
</ol> 

This is how it shows on the page: (Please look at the numbers)

So the question is why this is happening?Why are the numbers are appearing outside of the div element.

EDIT

I used :

.messageContainer ol
{
    list-style-position:inside;
    margin-left:5px;
}

which worked just fine but now this is what happened :

Try this in your CSS:

.messageContainer ol
{
    list-style-position: inside;
}