Problems with using h2 and h3 and changing to sleep for font-size

I’m experimenting with new-to-me use of rem. Simultaneously, I’m changing my HTML to use h2 and h3 instead of div to display headings in my files. When I change from <div to h2 or h3, text becomes emphasized. I can’t see any reason for it (css and html posted below).

Here are screenshots, first using div then using h2 for the headline:

Note that I lose centered text alignment when I set the headline to h1 with not changes to the subheading (Phyllis’ Scrapbook). Note also that the top margin or padding changes relative to the framed background.

Here’s the HTML code snippet before changing the

to

 
The Hutchins Clan 
Phyllis' Scrapbook 

Here’s the CSS snippet for the h2 and h3 classes.

h2.page-heading,h3.page-subheading { margin: 0.5rem 0; text-align: center; font-family: birthstone; font-size: 2.5rem; line-height: 1;}h3.page-subheading { margin: 0 0 1rem; font-size: 1.25rem;}

… and for

{ margin-left: auto; margin-right: auto; text-align: center; font-family: birthstone; font-size: 4.125rem;}

The font-size: 4.125rem was font-size: 17px; before I started experimenting and the text was NOT emphasized when displayed.

I’m too incompetent and ignorant to identify the issue( s ).

Any recommendations?

A strong fat is the browser’s default font weight for headings.
You would have to apply a rule such as font-weight: normal; to headings in the CSS to override this default.

Thank you. I thought there had to be some factor that I wasn’t aware of. I’ll experiment changing font-weight settings.