How to center logo and remove divide between images

[jewellerystore1]

Hello, I am using Exhibit theme. 

I would like my logo to be in the top centre of my home page and header menu left aligned like the attached reference. I would also like my images in my collage block to have no gap in the middle like the reference. 

Website preview: https://gzlnh77zvnbgvecn-74563387678.shopifypreview.com

Please help!

 

[BSSCommerce-B2B]

Hi @jewellerystore1 

You should try following the instructions below

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file base.bundle.css and add this code snippet to the end of the file

[id$='header-main-grid']>div:nth-of-type(1) {
    order: 2;
    padding-left: 90px !important;
}
[id$='header-main-grid']>div:nth-of-type(2) {
    order: 1;
    grid-area: 1 / 1 / span 1 / span 5 !important;
}

Result

If it's helpful, please like and mark it as a solution, thank you

Have a nice day

[jewellerystore1]

Hi there. Thank you!

I have added the code but the logo isn't centered. Also is there a way to completely remove the gap between the images?

Thanks!

[BSSCommerce-B2B]

I have checked the website, but I don't understand what the remaining issue is. Could you please clarify further? I'll assist you in a few minutes

[jewellerystore1]

I was able to remove the gaps within the images. But I need the logo in the middle of the page. See image attached:

 

[BSSCommerce-B2B · Accepted solution]

Hi @jewellerystore1 

In the above instructions

Please modify the CSS as follows

[id$='header-main-grid']>div:nth-of-type(1) {
    order: 2;
    display: flex !important;
    justify-content: center !important;
}
[id$='header-main-grid']>div:nth-of-type(2) {
    order: 1;
    grid-area: 1 / 1 / span 1 / span 4 !important;
}

Result

If it's helpful, please like and mark it as a solution, thank you

[jewellerystore1]

Thank you it worked!