How can I adjust the header width and size on all pages of my website?

Store Design

Topic summary

A user seeks to universally adjust header width and margins across all pages to align with body text on desktop. The current header appears narrower than the content below.

Proposed Solution:

  • Add CSS code to the theme’s stylesheet (base.css, style.css, or theme.css)
  • Target the page-width section with a media query setting max-width to 120rem for screens min-width 990px
  • The suggested code uses a specific section template ID

Current Issue:
The provided CSS solution works on some pages but not universally (e.g., fails on the returns page). The user needs a common class or base.css approach that applies the width/margin changes to every page’s header, rather than targeting individual section templates.

Status: Unresolved - seeking a truly universal CSS solution that affects all pages simultaneously.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Im using custom templates for certain pages but want a universal adjustment to all “pages” on my site. In desktop i wish to change the margins to bring them further out to match up with the body text. See images below and here is a link to see - https://devildaves.com/pages/hot-sauce-tasting-delaware

margins header.jpg
margins header.jpg1329×671 99.5 KB

1 Like
2

Hi @Ryanp

Check this one,.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 990px) {
.page-width.page-width--narrow.section-template--15590087524431__main-padding {
    max-width: 120rem;
}
}

And Save.

Result:

Made4uoRibe_0-1714325476094.png
Made4uoRibe_0-1714325476094.png1235×523 224 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thank you - I noticed you used a section template string.. Will that be universal for all /pages? It is not working for this page - https://devildaves.com/pages/returns

4

Yes, I only change the specific section only the image that you send. As you said line on the body. You are looking for common class that will aslo call to other section? As I inspect I only found that class can change the width in the title.

5

Yes do you know of anything I can put in my base.css to change every page width header margin?