HTML CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers

I have a requirment to implement a nested ordered structured html page very similar like this. Most of the part is done but I got stuck at 1 place in ordering of number. Please suggest. Below is the required structure and my code.

1.Main Line 111111111 
    1.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb

2.Main Line 22222222
    2.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb   
    2.2 Sub Line 22222222 
        a.aaaaaaaaaaa 
            i.moreeeeee
            ii.moreeeeee
        b.bbbbbbbbbbb 
            i.moreeeeee
            ii.moreeeeee

But getting some overlapped numbers as shown in image: Please suggest where I am doing wrong?

Here in my code:

ol {
  counter-reset: item;
}

ol>li {
  counter-increment: item;
}

.sub-num-list>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

.sub-num-list>ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

.sub-albhabatical-list>li {
  list-style-type: lower-alpha;
  margin-left: 20px;
}

.sub-roman-list>li {
  list-style-type: lower-roman;
  margin-left: 20px;
}

<div class="layout__wrapper">

  <ol>

    <li>Main Line 111111111
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>

      </ol>
    </li>

    <li>Main Line 22222222
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
        <li>Sub Line 22222222
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
            <li>bbbbbbbbbbb
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
          </ol>
        </li>
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

Solution

You were wrong in the use of your :before and the list counter CSS property. Also you probably got lost in CSS selectors and ended up with undesired effects.

I fixed it for you, hopefully this is what you were looking for

li {
  display: block
}

.main-num-list, .sub-num-list {
  counter-reset: item
}

.main-num-list>li:before,
.sub-num-list>li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

.sub-albhabatical-list {
  counter-reset: letter;
}

.sub-albhabatical-list > li:before {
  content: counter(letter, lower-alpha) ". ";
  counter-increment: letter;
}

.sub-roman-list {
  counter-reset: roman;
}

.sub-roman-list > li:before {
  content: counter(letter, lower-roman) ". ";
  counter-increment: roman;
}

<div class="layout__wrapper">

  <ol class="main-num-list">

    <li>Main Line 111111111
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>

      </ol>
    </li>

    <li>Main Line 22222222
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
        <li>Sub Line 22222222
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
            <li>bbbbbbbbbbb
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
          </ol>
        </li>
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

You can find some more informations in similar questions about list counter formatting and nested different list-style-type counters