Numbered lists not properly aligned

If a user wants to use more than 10 numbered lists in a page, they will be appear misaligned.

Steps to reproduce:

• From the Wiki editor, add more than 10 numbered elements.

  1. text
  1. text
  1. text
  1. text
  1. text
  1. text
  1. text
  1. text
  1. text
  1. text
  1. text
  1. text
  1. text
  

  OR

• From the WYSIWYG Editor, insert a HTML element. Inside that element, put the following code:

  <ol>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  </ol>
  

• you will see that after 10 elements, the alignment breaks.

This is caused by a css-line in colibri.css. The line is list-style-position: inside;

.main ol, .main ul {
    line-height: 1.4em;
    list-style-position: inside;
    margin: 1em 0 1em 2em;
}

Images attached