Creating full width repeating background section in middle of site with content

Okay, I will try and explain what I’m hoping to accomplish as best as I can. This is the test site I am working with currently: http://ethanjostadfoundation.amandacarlisledesign.com/

I have a client who likes this style of a website: http://www.templatemonster.com/demo/41357.html
meaning, they like the full width header, footer and middle piece, etc. Having a full width header and footer is no problem at all, what I’m stuck on is having a full width repeating background section in the middle of the site. You’ll notice the three images that are placed on that example, under the slideshow section, has a darker background to it. I’m trying to accomplish that!

So, on my site, I’ve figured out how to add that repeating background image and have found a way to make it full width, even though it is inside the sheet area, by creating a class that manipulates the margin.
Now my problem is centering the content within the sheet and having it not take over the negative margin I used for the background, since it’s within the same div tag. This is the code for the repeating background:
.dark-section {
background: url(“http://ethanjostadfoundation.amandacarlisledesign.com/wp-content/uploads/2013/08/color-section.png”) repeat-x scroll 0px bottom transparent;
padding: 43px 0px 15px; margin: 0 -2000px;
}

I tried creating a new class for the content I want to show within there, and giving it a positive margin, but that doesn’t seem to work. The content, when I zoom way out, is all the way to the left, as far as the background margin goes. The website currently has the images above the darker section (looking the way I want it to, just not in the dark section) and then the same set of images in the dark section, showing how they are all the way to the left of the darker image, when zoomed out.

I hope this makes sense! If anyone has any extra help or insight or an easier way than what I am currently doing, I would really appreciate it!