'is implicit styling of h2 tag required even if its parent div is already styled to center align?

This is my HTML code (I am practicing HTML!) and CSS file:

/*styling the child, descendants*/


/*Individual selectors*/

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #DC836F;
  font-family: century, times, sans-serif;
  font-size: 12px;
  /*base size*/
}


/*group selectors*/

body h1,
h2 {
  margin: 10px 5px;
  padding: 10px 5px;
  font-family: Courier New;
  color: #76565C;
}

.primary-class,
.secondary-class {
  border: solid 15px;
  border-color: #DC836F;
  margin: 5% 10%;
  padding: 2% 2%;
  text-align: center;
}


/*Descendant selectors*/

body h1 {
  font-size: 3em;
  font-weight: 800;
  text-align: center;
}

body h2 {
  font-size: 2em;
  font-weight: 600;
  text-align: justify;
}

body h1 em {
  color: #E0C1A5;
  font-weight: 700;
  font-family: monospace;
}

.primary-class {
  background-color: #E0C1A5;
  font-family: Trebuchet MS;
}


/*********************MY DOUBT IS HERE***********************/


/*
.primary-class h2{
    text-align: inherit;
}*/

<!DOCTYPE html>
<html>

<head>
  <title>Learn:Descendant selector</title>
  <link href="style-descendant-selectors.css" rel="stylesheet">
</head>

<body>
  <h1>Welcome to learning about <em>inheritance</em></h1>

  <h2>This was supposed <em>to be for fun!</em></h2>

  <div class="primary-class">
    <h2>Primary class block</h2>
    <p>In this section we <em>styled</em> the entire block using <strong>bold texts</strong></p>
  </div>
  <div class="secondary-class">
    <h2>Secondary class block</h2>
    <p>In this section we <strong>styled</strong> the entire block using <em>italicised texts</em></p>
  </div>
  <div class="primary-class">
    <h2>Primary class block</h2>
    <p>In this section we <em>styled</em> the entire block using <strong>bold texts</strong></p>
  </div>
  <div class="secondary-class">
    <h2>Secondary class block</h2>
    <p>In this section we <strong>styled</strong> the entire block using <em>italicised texts</em></p>
  </div>
</body>

</html>

MY PROBLEM:

I have a <h2> tag in <div class="primary-class>. (please refer to html code) I have styled <div class="primary-class> with text-align: center; So, if we style as mentioned above, then I should see everything inside the <div class="primary-class> to be center aligned right?
If answer to above question was YES, then the h2 tag that I have used within that div should have been center aligned right? But it did not happen:

I had to implicity delcare the h2 tag within the div, to make it center aligned, as below:

.primary-class h2{
    text-align: inherit;
}

Now the tag seems to be center aligned. But it should have by default inherited the properties from the <div class="primary-class> right?

----Note: I also tried entering these in <body>. primary-class and <h2> tag styling also, but none worked except for the above mention section!---------

text-align: center;
align-content: center;
align-items: center;

Please let me know where I went wrong, or is it what is it like, we have implicitly style the html tags within our CSS?

THANKS IN ADVANCE FOR YOUR REPLY! - I am still a newbie to Stackoverflow! - will learn to be more concise and ethical next time!

Solution 1:^[1]

An h2 element has text-align: inherit by default, but you have:

body h2 {
  text-align: justify;
}

… so the text is justified instead of inheriting it alignment rules from <div class="primary-class">

Use the developer tools Inspector in your browser to see which rules are applied to an element:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Quentin

'is implicit styling of h2 tag required even if its parent div is already styled to center align?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]