Add point in title numbering and add numbering in ordered list subtitle

Question

I wonder where I’m going wrong in my css code, because I’m trying to put a point in the title of the ordered list, example:

1. Title

And also add sub-title to the same:

1. Title

   1.1 Sub-Title

But when I go to see the test, it is not adding the point in the numbering of the Title, getting like this:

1 Title

Where the subtitle works normal.

Css code:

 ol {
        counter-reset: section;               
        list-style-type: none;
    }

    li::before {
        counter-increment: section;            
        content: counters(section, ".") " "; 
    }

    .custom-counter {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .custom-counter li {
        counter-increment: step-counter;
    }

    .custom-counter li::before {
        content: counter(step-counter)'.';
        margin-right: 5px;
    }

HTML code:

<div class="col-sm-50" style="margin-bottom: 30px;">
        <textarea required="" type="text" class="form-control" name="comentarios">
        <ol class="custom-counter">
                <li><b>RESUMO DE ATIVIDADES</b></li>
                <li><b>COMENTÁRIOS</b></li>
        </ol>
        </textarea>
</div>

Remembering that, it does not have a subtitle in the above code because I am working with Ckeditor, where after I do a line break in the title inside the text editor, it automatically adds a subheading

Sample image:

Answer 1

You have to "start" the Counter throughout the <ol>, and remove the default value from the Sorted List. Then <li> you make the increment of Counter in the Content of the list

Basically only I removed these two classes .custom-counter li and .custom-counter li::before of your CSS and already worked.

I left the comments in the CSS code

Take the example. (I just removed the textarea of your code to make it easier to see)

ol {
    counter-reset: section;  /* valor da inicial 1 */             
    list-style-type: none;   /* remove o valor default da <ol> */ 
}

li::before {
    counter-increment: section; /* inicia uma nova contagem com o valor 1 */          
    content: counters(section, ".") " ";  /* coloca antes do 1 o valor do pai */
}

.custom-counter {
    margin: 0;
    padding: 0;
    list-style: none;
}

<div class="col-sm-50 " style="margin-bottom: 30px;">
    <!-- <textarea required="" type="text" class="form-control" name="comentarios"> -->
    <ol class="custom-counter">
        <li><b>RESUMO DE ATIVIDADES</b>
            <ol class="custom-counter">
                <li><b>SUB ATIVIDADES</b></li>
                <li><b>SUB ATIVIDADES</b></li>
            </ol>
        </li>
        <li><b>COMENTÁRIOS</b>
            <ol class="custom-counter">
                <li><b>SUB COMENTÁRIOS</b></li>
                <li><b>SUB COMENTÁRIOS</b></li>
            </ol>
        </li>
    </ol>
    <!-- </textarea> -->
</div>

Here you can read more about the Counter https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters