Список на левой границе, когда положение установлено снаружи

Question

Я пытаюсь выровнять левую часть списка по границе документа (такая же вертикальная позиция, как и у элемента заголовка).

Примечание. Поскольку я хочу установить интервал между числами и фактическим содержимым, я решил использовать list-style-position: outside.

HTML:

<h1>My Title</h1>
<ol>
    <li>first list element</li>
    <li>second list element</li>
    <li>third list element</li>
</ol>

CSS:

ul, ol {
    line-height: 17pt;
    list-style-position: outside;
}

ul {
    list-style: square;
}

ol {
    list-style-type: decimal;
}

ul > li, ol > li {
    padding-left: 5mm;
}

Что он делает в данный момент:

Что я хочу сделать:

Answer 1

Я не думаю, что это возможно, когда вы используете list-style-position: outside. Посмотрите этот пример https://jsfiddle.net/obpm5qrc/12/

Я не уверен, что вы можете изменить свой HTML, но использование list-style-position: inside и дополнительный диапазон с отступом решит вашу проблему.