Center text on header image

Continuing the discussion from Add text to header:

Hello, I realize this is a very old topic, but I found this solution and it worked great. However, I need a bit of help with the width of the text over the image. I would like it to remain centered, but with more of a margin on the left and right so it is not so wide. I’ve tried adding padding, margin, and position to CSS, but each method I try seems to add it to only one side or the other. Any advice for this? Here is the link to a page with the custom text on the header image: http://faeriesintheattic.com/echos/snow/

Hello, try to replace that CSS code with this:

.header-image::after {
    color: #fff !important;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-shadow: 1px 1px #36401e;
    text-transform: uppercase;
    position: relative;
    top: 45%;
    padding-left: 11vw;
    padding-right: 11vw;
    display: block;
}

.page-id-51 .header-image::after {
    content: "WE EXCEL AT CREATING AUTHENTIC EXPERIENCES & COMMUNICATIONS THAT BUILD BRANDS AND RELATIONSHIPS.";
}

…so you will not duplicate code and add only page-specific content with page IDs.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi Roman,

That worked perfectly.

Thank you!!