Strange issue with collection headers

[JJWatt]

Hey, So, I am working on a new site for us, and, the image will show this, short version, the header from the collection is only about 2/3rd of the width, as is everything in it, and, its throwning off my "look"

I would like it to cover the same width as the rest of the page, and, ideally, be able to centre it

I have added the following after looking on here

Which i understand should stretch it across, and also add a little padding at each site, but, its not doing anything at all. I also added this as I saw in another column, on the bass.css file

But, it still looks like the screenshot in the beginning of this post. Where am I going wrong?

URL is https://jhs-b2b-test.myshopify.com/

I am having issues with the logo images under the links at the top, I want them all the way across but, cant find a way to do it without them being tiny! But i can cope with that at the moment

Cheers

[Moeed · Accepted solution]

Hey @JJWatt 

Follow these Steps:

1) Go to Online Store
2) Edit Code

3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.collection-hero__inner.page-width.scroll-trigger.animate--fade-in {
    text-align: -webkit-center !important;
}
.multicolumn .title-wrapper-with-link {
    justify-content: center !important;
}
</style>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[JJWatt]

Brilliant, thanks for that 🙂

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.