Html - CSS to align page title center width

Adivate
June 18, 2023
227 views
0 votes
2 Answers

Can anyone see what I’m missing. I’m just trying to align the page title center width. However, nothing works. The h1 element doesnt to go to 100% width of its parent container (really the browser width), no matter what I try (I’ve tried 20 different combinations of values)…

.ast-archive-description {
    background: #000000 !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 100% !important;
}
.ast-archive-title {
    text-align:center !important;
    color: #FFCC00 !important;
    width: 100% !important;
}

It’s on this page:
https://holyspiritprints.com/category/fine-art-prints/sweet-psalms-arizona/

Thanks kindly for what I’m doing wrong. 🤷‍♂️

Tags: css html

Answers

- SollyBunny
- June 18, 2023 at 8:41 pm
- 0 votes
0
After scraping about a bit in your page, I have noticed a lot of rule overriding (where the rule is crossed out). This should be avoided as it makes it hard to see what rules apply where as well as adding unneccary css. The offending rule here is this:
```
body.archive .ast-archive-description {
    max-width: 1200px;
}
```
Disabling it centeres the text.
If editing this css isn’t an option you can override it to unset
```
body.archive .ast-archive-description {
    max-width: unset !important;
}
```
Also note that you have included the same CSS file twice (I don’t know if this is wordpress’ fault)
Login or Signup to reply.