Css font-size for headings

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


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


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*/


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

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.