H2 Issue I Can't Figure Out

HTML & CSS
1

In the ss below, the text “Hutchins Ancestral Line” is an h2. You can see in the DevTools portion that its style calls for centered text. Obviously it is not centered.

Perhaps complicating the issue, I wanted to make a :hover effect on the text shown in the DevTools html line above the <h2 class="subheading> . . . . The effect works but not quite like I expected. The text in the <p> tags displays on hover but despite getting it to appear in a container I cannot control the container’s width (however that’s not the problem I’m trying to solve because I’ve decided that the hover should just pop up a block with a link to the text so as not to clutter the screen unless users want to read what amounts to a popup footnote). I might come back on the issue of the width of the linked text container.

I also posted a CodePen. The HTML is a snippet but the CSS is complete because when I’ve tried to extract what I think is relevant I don’t always get it right. Also, my problem might be created by CSS that I’m not aware is affecting the page.

I don’t understand why the text-align: center; element is not working. DevTools shows the element without a line through it which, I think, means that the code either has been superseded or is not executed.

Could the problem be that I’m not supposed to add :hover to a heading tag?

Still learning . . . and forgetting . . . and re-learning . . . and . . .

subheading not centered
subheading not centered1880×885 76.5 KB

2

Though the h2 is displayed as a block, its parent div is displayed as an inline block, therefore it is not full width.
The h2 does have centred text, it’s just that its container is only as wide as the text itself, being an inline block.

1 Like
3

Thank you, Sam.

I need to re-visit the lessons on blocks and what effects display qualifiers have on them. Changing the parent div (hover-box-container) to display: block; solves the problem. I used a couple of different AIs to find the answer without success.

4

A block element (or any element with display:block applied) will by default fill the full width of its container, unless you specify some other width.
An inline or inline-block will shrink fit its width to its content, again unless you specify some other width.