How do I align my pages content to the left?

Store Design
, ,
1

Hello,

I would like my Shopify pages to be left aligned rather than in the centre like this. I am using the default theme ‘Horizon’ and I can’t see any option to have the page section be left aligned with my logo and header so that it is not so far off in the centre. Any help would be greatly appreciated, thank you.

2

Screenshot 2025-12-19 at 09.38.17
Screenshot 2025-12-19 at 09.38.172880×1504 314 KB

You can see here what I mean.

3

Hi @BestBoosterBoxes ,
In the Horizon theme, page content is centered by default and there isn’t a built-in setting to left-align it. However, you can adjust this with a small CSS change.

  1. Go to Online Store → Themes → … → Edit code
  2. Open base.css (or theme.css)
  3. Add this at the bottom:
.page-width {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  padding-left: 40px; 
}

If you only want this for pages (not product/collection pages), use:

.template-page .page-width {
  max-width: 100%;
  margin-left: 0;
}
4

Hi :blush:

This is normal behavior in the Horizon theme. By default, Horizon uses a centered container with a max-width for all page sections, and unfortunately there isn’t a setting in the theme editor to left-align the entire page content with the logo/header.

To left-align the content, you’ll need a small CSS adjustment.

5

You’ll need to add custom CSS to override the centered container (e.g., adjusting max-width and margins to margin-left: 0). This can be done in Theme settings → Custom CSS or via Edit code, or a Shopify dev can help apply it cleanly.

6

This did not work, sadly.

7

Hi @BestBoosterBoxes

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

8

Could you please share your store url…

9

Hello! we have the same problem, any solution? Our shop is here: https://www.superleggero.com/ Any help would be really really appreciated! (-:

12

dear ann, thank you so much, but I do not find your reply (-:

13

Yeah, Horizon does this by default — it wraps most sections in a centered container with a max-width, and there isn’t a toggle in the editor to change that.

The fix is usually pretty small though. In base.css (or theme.css), look for something like .page-width, .content-container, or .section and you’ll see a max-width + margin: 0 auto. Removing the auto margins or overriding them will left-align everything with the header instead of floating in the middle. For example:

.page-width {
  margin-left: 0;
  margin-right: auto;
}

You can also scope it just to specific templates if you don’t want the whole site affected.

If you’d rather not dig through theme files, this is also something Easy Edits can handle with click-and-change or just telling the AI “left align this page like the header.” I built it, so happy to help either way.

14

hey @BestBoosterBoxes share the URL of your website plz