Changing Margin and Header on Individual Event Pages

Hi! Looking for some help customizing the margins and background image for event pages (all the individual event pages, as opposed to the Event page where all the events are listed). The default side margins are very thick in both the desktop and mobile views on these pages (which isn't happening anywhere else on the site). Ideally, I'd like the background image to fill the entire page (the same way it does on Home, About, FAQ, etc.). I also want my header style and background to carry over since they seem to be overridden here for some reason. Any help would be appreciated!

[updated] Site URL: https://www.hastyfaun.com/upcoming-events
[updated] Password: codinghelp1

(Sorted out the margins! I had put some CSS in for the main page previously that was apparently affecting the individual pages too, so I removed that. So the header format/style is the only thing I need help with now!)

Combed through more CSS and found this bit that I had to add a background color/image to a section on the main Upcoming Events page, which seems to carry over to the individual events. Removing it doesn't solve the issue with the header (and only affects the desktop view, not the mobile), but thought I'd mentioned it!

Quote

//Adding color and background image to Upcoming Events page//
section[data-section-id="65ebe4140e8c8f1671502c97"]{
    background-color: #f7e76f;
  background-image: url('https://static1.squarespace.com/static/65ea61bd51b55338cbb59aa6/t/65ee5b2543cecc0ef3d02b4f/1710119723287/misc-background-yellow-mono.png');
    background-size: cover;
    background-repeat: no-repeat;
}

Ok, another update! I got my header colors back-- it looks like the event pages are essentially being treated as one section and it's the same section ID as the section (with the same background image) on the "Upcoming Events" page. So they also adopted the same color profile, which was an easy fix once I understood what was happening. I am still confused as to why the desktop and mobile backgrounds are different and, though I could live with it as it is, I'd really prefer to have the blue checkered image be the background behind the header and have the yellow background be only behind the event details.

Did you solve all or still need help?

Not quite, I got the margins sorted but I wasn't able to figure out how the  background images on the individual Event pages. Apart from the margins, they still look the same as in the "current" screenshots I first posted (rather than how I'd like them to look in the "mockup" image). Help would be appreciated if there's a way to do that!

On 3/19/2024 at 9:06 AM, littlecrow said:

Not quite, I got the margins sorted but I wasn't able to figure out how the  background images on the individual Event pages. Apart from the margins, they still look the same as in the "current" screenshots I first posted (rather than how I'd like them to look in the "mockup" image). Help would be appreciated if there's a way to do that!

All event detail will use same background or different? Then I will test code again

Yes, they all will use the same! I just want the blue background image behind the header section to also carry over to those pages, like it does on the rest of the site. 

That did it, thank you SO much!! Your responses in other forums have also helped me many a time so thank you for sharing your time and coding wisdom!