html - CSS Counter Increment does not work

You have to reset counter subsection for each H1:

h1 {
    counter-reset: subsection;
}

body {
	counter-reset: sections  subsection;
}
h1 {
	counter-reset: subsection;
}
.manual h1:before {
	counter-increment: sections;
	content: "Section " counter(sections) ". ";
}
.manual h2:before {
	counter-increment: subsection;
	content: counter(sections) "." counter(subsection) " ";
}
.manual h2{
	line-height: 60px;
	color: #3a7486;
}

<div class="manual">
<h1>1</h1>
<h2>1.1</h2>
<h2>1.2</h2>
<h2>1.3</h2>
<h2>1.4</h2>
<h1> 2</h1>
<h2>2.1</h2>
<h2>2.2</h2>
<h2>2.3</h2>
<h2>2.4</h2>
</div>

You need to reset subsection

check this snippet

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

<div class="manual">
  <h1>1</h1>
  <h2>1.1</h2>
  <h2>1.2</h2>
  <h2>1.3</h2>
  <h2>1.4</h2>
  <h1> 2</h1>
  <h2>2.1</h2>
  <h2>2.2</h2>
  <h2>2.3</h2>
  <h2>2.4</h2>
</div>

Hope it helps

As @Geeky and @Banzy stated you need to have conter-reset on H1. However, please note that do not separate h1 and all of its related h2s by sections. If you use

, they all have to be placed in the same section. Have a look at the html below. With the same css, only the first section that includes the first h1 and its related h2s work fine. As, you can see the second section does not work properly.

<div class="manual">
    <section>
        <h1> heading 1</h1>
        <p>test</p>
        <h2>1.1</h2>
        <p>test</p>
        <h2>1.2</h2>
        <p>test</p>
        <h2>1.3</h2>
    </section>
    <section>
        <h1> heading 1-Second time</h1>
    </section>
    <section>
        <h2>2.1</h2>
    </section>
    <div>
        <section class="test">
            <h2>2.2</h2>
        </section>
    </div>
    <div>
        <section id="test">
            <h2>2.3</h2>
        </section>
    </div>
    <div>
        <h2>heading 2-second time</h2>
    </div>
</div>