twenty twelve make responsive image in body outside of container

Okay, I’ve been working on this for days, trying other people’s solutions and all kinds of css tweaks, but I think I just need help because of all of the custom css I have in this Twenty Twelve child theme.

Page is at:
https://gardcomm.ipage.com/

What I want is to make the middle image (the line) stretch outside the main content container so that it always fits to the browser (edge to edge). I can’t make it a background image because I need to have it layered on top of the content, so I gave it a high z-index.

Right now I have this in my custom css to give the image the class, but it’s not showing up that way:

body
{
	overflow-x: hidden;
}

.extendfull, .extendleft
{
	padding-left: 3000px !important;
	margin-left: -3000px !important;

}

.extendfull, .extendright
{
	padding-right: 3000px !important;
	margin-right: -3000px !important;
}

I’m thinking it’s because I can’t put image element outside of the content, right?

And on top of that I need to have the line image always align and resize with corresponding content (image/grid/text) in the container.. which will change depending on the page.

Please help. I’ve used Firefox Firebug and Chrome’s Inspector tools and done all I know how to do.. totally stuck. Thanks!