What I would like to happen is for the red bar to extend all the way to the left margin of the screen but for the content inside the bar to remain aligned with the "S" of Solutions like it does now. I also want the edge of the red bar to remain right aligned with the right edge of the big white text as it does in the image.

At the moment the whole content is inside the "centered-container" which has a fixed with of 980px and the bar is currently a fixed width (775px). The problem is that the gutter width outside of the "centered-container" is variable depending on the screen resolution and because the bar is semi-transparent I can't just put a red box background image on the <header> because it would show up where this overlaps with the red container.

I thought about moving the whole thing outside of the "centered-container" but I could not figure out how to line the content up with the left of the "S" or how could set the correct width so the box aligns with the right edge of the text if I did this.

Is Javascript the only way I can achieve this layout or does anyone know a way to do it with CSS?