How to remove indent from the second numbering level ? - html

Question

I have problem to remove indent on the elements 2.1 , 2.2 , 2.3 etc... probably the third numbering level indent will be moved to left after solving that problem.
My code:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
I tried a lot of ways, but nothing is not correct. Someone do have idea , how to solve that, please?

Answer 1

Add these styles
ol ol {
padding: 0;
}
ol ol ol {
padding: 20px;
}
ol {
counter-reset: item
}
ol ol {
padding: 0;
}
ol ol ol {
padding: 20px;
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>

Answer 2

Assuming you can't change the markup, you could apply your styles to the list's parent element and target the second numbering level using the child combinator (>):
.list-parent > ol > li > ol {
padding-left: 0;
}
.list-parent ol {
counter-reset: item
}
.list-parent li {
display: block
}
.list-parent li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div class="list-parent">
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
</div>
This would be the best approach concerning maintainability as well, as applying global styles to every <ol> list on your website would only result in unwanted behavior sooner or later.

Answer 3

Here is an easy solution:
(See the comments in the code)
ol {
counter-reset: item;
padding-left: 0; /* Remove the padding of all ol elements */
}
ol ol ol {
padding-left: 1em; /* Set the padding of third level ol elements */
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
Hope it helps.