How to make main-wrapper a fixed size

I’m trying to make the width of my site not go the full width on larger screens and have a background. I’ve got all the elements in place, except the #main-wrapper

Here’s my code:

body {
margin-top:     0px;
margin-bottom:  0px;
padding:        30px 0px;
background:     url(https://tstest22.techsurgeons.com/wp-content/uploads/2015/02/testbg.jpg) repeat  ;
}

#main-wrapper {
background:     #FCEBB3;
margin:     0px;
padding:        20px 20px;
}
header.tc-header {
background: #8AA2AC;
}

@media all and (min-width: 1080px) and (max-width: 1920px) {
.tc-header {
width: 1024px;
margin: 0 auto;
}
footer#footer {
width: 1024px;
margin: 0 auto;
}
.carousel-inner {
width: 1024px;
margin: 0 auto;
}
#main-wrapper {
width: 984px;
margin: 0 auto;
}
.container {
width: 1024px;
margin: 0 auto;
}
footer#footer {
width: 1024px;
margin: 0 auto;
}
}

and here’s the sandbox I’m playing it, which just has some dummy content: https://tstest22.techsurgeons.com/

but you can see that the main text below the feature boxes go past the main-wrapper. The feature boxes did too, until I added the .container width call above…

The footer text is also going past.

The only other thing I’d like to control is getting the header image to be flush at the top of the tc-header–right now its got a small strip of blue right above it before it goes into the gear background. I’d like it to have that gear background at the top and then go right into the header image.

Thank you!