how do I make the header background color full width?

Store Design

Topic summary

A user seeks to extend their website header’s background color to full width, as it currently doesn’t span the entire page.

Visual Context:

  • A screenshot shows the header with a background that doesn’t reach the page edges
  • The site in question is www.christiangallery.com

Proposed Solution:
Another user provides CSS code to resolve the issue:

  • Navigate to: Online Store > Theme > Edit Code > Assets > base.CSS
  • Add the following CSS:
.gradient {
  margin: 0 !important;
}

The discussion appears resolved with a technical fix provided, though no confirmation of success from the original poster yet.

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

hi!

is it possible to make the header background color also full width?

Schermafbeelding 2022-10-29 om 07.35.02.png
Schermafbeelding 2022-10-29 om 07.35.02.png2880×1445 1.15 MB

https://www.gallerychristian.com

thanks!

Christian Russo

2

Hello @christian_russo

Try this code: it will be helpful to you-

Go to online store> theme>Edit Code>Assets>base.CSS>Add code in this file.

.gradient {
   margin: 0 !important;
}