Css font-size for headings

HTML-CSS
1

Why h1-h6(headings) are different size when the font-size is declared on the parent element? using rem unit?

HTML:

<div class="parent">
    <h1 class="child">Hello World</h1>
</div>

CSS:

html {
       font-size: 62.5%;
}

.parent {
  font-size: 3rem;  /*If i declare in parent the font calculation is 45px, meaning it calculates 15px per 1rem*/
}

.children {
  font-size: 3rem; /*While if i declare directly to the element he follow my calculation 10px per 1rem. So here the calculation is 30px*/
}

Why?
2

Which task is this? Can you put a link of it so that I can check it?

3

i just making a test and just showing like this. if you can quickly test it on your side and tell me why is that happening.