I am filling a gap at work and adding legal terms and conditions to our website.

I’ve stumbled my way through somewhat understanding “counters” and overall the document looks good. The final change I would like to do is align all the numbering to the left of the document. I’ve been tooling around message boards for a while and cannot seem to find a solution. Could y’all please help?

<style>
    .city{
    ol li:before {
    width: 1em;
    position: absolute;
    text-align: center;
    margin-left: -3em;
    }
    ol {
    counter-reset: section;
    list-style-type: none;
    }
    li::before {
    counter-increment: section;
    content: counters(section,".") " ";
    }
    li {
    margin: 10px 0;
    }
    }
</style>

Result:

Ideally: