Headline background color full-width of browse while keeping text width the same

I am currently trying to make the backgrounds of my headers colored but full width of the browser (keeping the header text even with the body text).

I have a mobile responsive child theme, in case that makes a difference.

I tried negative padding with overflow hidden as outlined in this post, but it is not seeming to work (I am probably doing it wrong).

I know CSS a little bit, but am mostly good at modifying existing things instead of adding things in and this has me stumped.

Ideas?