font-size discrepancy using rem

Hey guys I am doing a project and I am new to front-end. Doing so, I found something which I cant understand. Could you guys help me with that.
My browser: 1rem = 16px

If i set font-size on using join__cards *....i get expected font-size. But if i set that on its grand-parent div...even though font-size is inhereted (You can see this in the screenshot) font-size is unexpected. I dont understand why this is happening.

Any help would be much appretiated. Thank you in advance.
css.png
html.png
font_size_on_join__cards_all_selector.png
font_size_on_join__cards.png
Was this page helpful?