[Resolved] I need help with aligning my H2 and H3 tags

[Richard]

So, the problem I am having is that my H2, and H3 tags are left aligned to the far left of the container. But this is to the far left of the container, and my body text shows up to the right of it. I want these to match.

My body text is also left aligned also, but shows up further to the right (and the body text is actually centered within the container). The body text is right where i want it, centered in the container, but left aligned.

So far, the only way I could get this to align is to adjust the container width to 825 px, but it is too small for a desktop if I add a sidebar. I am now adjusted to 1120 px, and it looks horrible. This seems to be a problem with my pages, but not posts that are created in gutenburg. Classic posts have the same issue though.

Somehow, I manages to fix this for the H1 tag, by finding this code, but can’t figure out why it works, or how to get it to work for h2 or h3 tags.

Here’s the code that works for centering the H1:
.page-header h1, article h2, article .entry-header, .entry-header h1, .entry-content h2, .entry-content h3, .entry-content h4 {
text-align: center;
}

I have tried to use the following code to center align h2, and h3 tags, but it doesn’t work, it’s here:

“h2 {
text-align: center;
}

I’ve also found a couple that center the H2, and H3 tags, but it also centers the body text too (Which I don’t want to do). Here’s those codes for reference:

.container {
text-align : center;
}

also, this one:

div {text-align: center;}

I admit I am a newbie with CSS so there may be an easy solution. I just can’t seem to get it to work.

I even removed all of my CSS code that I added, and it still shows up with the issue as described above, except H1 also has the same issue too.

Not sure if it helps, but I do have the GeneratePress Premium version.

Any assistance you can give me would be greatly appreciated. Thanks

[David]

Hi there,

you have this CSS:

h2,h3 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 65%, #87acdf 65%);
    display: inline;
    margin-left: auto;
    margin-right: auto;
}

The display: inline; is the problem. Remove that to see the 🙂

[Richard]

It looks like this actually fixed the problem almost. The only problem is that the line-gradient that I am using for H2 and H3 text spans the entire width of the container, but the text is centered. Thank You so much for figuring that out, my worst case scenario is that I can just remove the line gradient if I can’t get that to work.

Is there a way to contain the line-gradient to just the width of my text then? For some reason, it’s working perfectly for my H1, but not for my H2 and H3 tags. Thanks.

[Richard]

Actually I figured out how to do it. It’s working now, thanks for your help though.

I ended up finding some CSS code that fixes the issue, but I appreciate your assistance. Have a great day.

[David]

Glad to hear that 🙂

[Richard]

Never mind, I figured out the problem is that I was using a photo that was too large, and it was breaking the frame. I’m closing this ticket, thanks.

[Author]

Posts