HTML line spacing


In the exercise: differentiating text: HTML Headers , I have to change the letter-spacing value to 1px for “all of the headers” for the site Appetizers. To do so in first instance I add the letter-spacing to the selector .site-main-header.
.site-main-header {
margin-bottom: 30px;
text-align: center;
letter-spacing: 1px;

But that did not work. So I add the letter-spacing to:

h1 {
font-size: calc(64px / 1.5);
line-height: 1.25;
letter-spacing: 1px;

h2 {
font-size: calc(40px / 1.5);
letter-spacing: 1px;

h3 {
font-size: calc(32px / 1.5);
letter-spacing: 1px;

h4 {
font-size: calc(23px / 1.5);
letter-spacing: 1px;

I wonder why I can not change the letter-spacing directly in .site.main.header selector for all headers?
Thank you.

Hi @yasminenemri06816565
it is not possible to tell without knowing your html structure. But this:

is definitively another selector than this:

First example html:

<div class="site-main-header">

Second example html:

<div class="site main header">

Thank you. Not noticing the difference in the dot and middle line. This is the HTML structure, concering the site-main-header:

<main class="site-main">

  <header aria-labelledby="page-title" class="clearfix site-main-header">

||||| |—|—|—|—| ||||


||||| |—|—|—|—| ||||

  <section aria-label="" class="site-main-section">

Ok, then .site-main-header is the correct selector. But font styles aren’t always inherited as expected. If you want to space all direct children of that container the same way, you could use this selector:

.site-main-header > *
1 Like