Problems with font-size between the parent and the child element css

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.logo{
width: 25%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
border: 2px solid gold;
}

.logo h1{
margin-left: 1vw;
/*font-size: 1.3rem;*/
border: 2px solid red;
}

<!-- language: lang-html -->

<section id="l" class="logo">
            <i class="fa-solid fa-dragon"></i>
            <h1>Blog</h1>
</section>

<!-- end snippet -->

When I change the font size in the .logo selector I can see that my h1 element gets bigger. However, when I do the same but now in the .logo h1 selector the size its different. Note that for both cases I am putting the same font size. I don't know what is going on.

You can use your browser's devtools inspect facility to see exactly who/where the font-sizes are being set.

In the case that the font-size is set to 1.3rem in the parent, that is setting the em size.

It's child (the h1) doesn't explicitly have a font-size set by you so it picks up the font-size set by the browser. In the case I looked at this set the font-size of an h1 to 1.5em.

So the font-size in the h1 becomes 1.5 * 1.3rem

In the second case you have overidden the default font-size of the h1 by setting it specifically to 1.3rem - which is smaller than 1.5 * 1.3rem.

One rem is equal to the font-size of the root element. For example, if the font-size of the root element is set to 16px, then 1rem is equal to 16px.

Using rem units can make it easier to create responsive designs, as it allows you to set sizes relative to the root element rather than using absolute pixel values. This means that if the user changes the default font size in their browser settings, your website will still look proportionally correct.