I think the container and inner container need to be set to full width, with a new contained div added to create the text introduction area – it’s that part that I’m struggling with, especially alignment.
Thanks but I’m struggling to keep the space above and below the page title consistent. I can increase the bottom padding value of the header element to match the margin-top value above but it’s not perfect. No way to do this without using a negative margin?
I did want to add a lead paragraph into the header element where the page content now begins. I know you could just style the first paragraph using the block editor but I’d rather do that with css.
Theres no easier way to do that other than use negative margins.
To keep it more uniform change the (min-width: 1024px) to 769px this will maintain the overlap on tablet and desktop.
For the mobile device you reduce the Header Elements bottom padding.
I got the result I wanted by using the generate_after_header hook and applying a negative margin to the content. Then added a bottom margin to the H1. Also had to set the container padding to top 0px (re-added default values for homepage).