Numbers Appear Outside Of 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 : do the things respectively:

<ol>
<li>
Create 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. I used:

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

which worked just fine but now this is what happened.