Place header in the middle

Store Design
, ,

Topic summary

A user is experiencing a header alignment issue on their Shopify store’s “About Us” page, where the header has shifted to the left instead of remaining centered. The main page displays the header correctly.

Proposed Solutions:

  • Two contributors offered CSS code snippets to be added to the base.css file, targeting the header’s grid positioning and margins using media queries for screens wider than 990px.
  • Another suggested adding code to the theme.liquid file.

Current Status:

  • The initial CSS solutions provided did not resolve the issue.
  • One contributor requested the user implement their second code suggestion before further troubleshooting, wanting to diagnose the problem after seeing the results.
  • The discussion remains ongoing with no confirmed resolution yet.
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hi for some reason on this page the header has moved to the left, not sure why.. can you please help me place it to the center? Thank you

Pass: biangu

Url:https://matibrnd.com/pages/about-us-now

MT27_0-1711107994922.png
MT27_0-1711107994922.png3439×1279 666 KB

2

Hello @MT27

Put This Code on Your Edit code > base.css

@media screen and (min-width:990px){
    #shopify-section-header .header__inline-menu {
        margin-left: 0 !important;
        margin-top: 0 !important;
        grid-row: 1;            
    }
    .header.header--top-center h1.header__heading {
        grid-column: 1;
    }
}

Can You Need Other Help Please Contect On

mail.to ==> raj.s.hopiant@gmail.com

3

didn’t work..

MT27_1-1711112423788.png
MT27_1-1711112423788.png3439×1239 668 KB

4

Add This Css on base.css.

@media screen and (min-width:990px){
    #shopify-section-header .header__inline-menu {
        margin-left: 0 !important;
        margin-top: 0 !important;
        grid-row: 1;            
    }
    .header.header--top-center a.header__heading-link.link.link--text.focus-inset,h1.header__heading {
       grid-column: 1;
    }   
} 
header.header.header--top-center.header--mobile-center.page-width.header--has-menu{
    left: 0;
    right: 0;
}
5

didn’t work again, can you kindly check mainpage? that’s how it should be

Url: matibrnd.com

MT27_0-1711120414904.png
MT27_0-1711120414904.png3438×1236 706 KB

6

Hi @MT27 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

7

First you put my second code and then I will tell you the problem, Because I want to be a judge

See screenshot >> https://prnt.sc/t_dVxd058dRq
Notify me after placing this code