Список не отображается правильно в элементе DIV

Question

У меня есть элемент div, который имеет следующие атрибуты css:

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;
}

При размещении этой HTML-части внутри элемента div:

Please 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> 

Вот как это показано на странице: (Пожалуйста, посмотрите на цифры)

Итак, вопрос в том, почему это происходит? Почему числа появляются за пределами элемента div.

EDIT

Я использовал:

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

, который работал просто отлично, но теперь вот что произошло:

Answer 1

Попробуйте это в своем CSS:

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