How can I adjust the width of my website's image banner?

Topic summary

Issue: The store owner wants the homepage image banner to match the site’s content width (same as the “image with text” section) rather than full-screen. They provided the site URL (slushychallenge.com) for context.

Proposed fix: A responder suggested adding CSS in assets > base.css to limit the banner’s width to the page container and center it (using max-width: var(–page-width); margin: 0 auto; on the banner selector).

Current status: After trying, the owner reports the banner is still too wide and asks for further recommendations. The helper follows up to confirm whether the CSS was actually applied. No confirmed resolution yet; additional troubleshooting (e.g., verifying selector and theme structure) is pending.

Summarized with AI on January 2. AI used: gpt-5.

Hi guys, how can I change the width of my image banner to match the rest of my website??? It should not be the width of the full screen. Any help is greatly appreciated!!

The width should match the image with text at the top of the website.

Website: slushychallenge.com

@flammagreg try this css on assets > base.css

.banner {
max-width: var(–page-width);
margin: 0 auto;
}

The banner is still too wide. Any other recommendations?

Did you try the css code?