Customizing joomla template framework - html

Question

I have problem customizing Helix Framework template. I want to change width of the page to lets say 1140 px. If I do it in the framework menu it changes only text field width but all graphics stay full width. How I can make it look like in attachment below?
I know I can use
body {
width: 940px;
}
but it makes mobile version unreliable because there is fixed page width. So it becomes none responsive. Is there better way of editing the code?
Thank you!

Answer 1

If i can fully understand you...
You can try this
.container {
max-width: 940px;
}
UPDATED (comment request)
.body-innerwrapper {
margin: auto;
max-width: 940px;
}

Answer 2

If you would like to add background images for each or separate sections, then see below both screenshots
Example Screenshot1:
Add background image to section in Joomla Template
Example Screenshot2:
Add fixed width to container(within background image) in Joomla Template
1. To making full size background image for any section then use below code (see first 1. To making full size background image for any section then use below code (see first 1. To making full size background image for any section then use below code (see Screenshot1)
#sp-services-wrapper {
background: url('put background image url here') #b64c52 top left no-repeat;
}
2. To add fixed width to any section then use below code (see Screenshot2)
.container {
max-width: 1170px;
}
(or)
#sp-services-wrapper .container {
max-width: 1170px;
}
Just like above example, you may do for rest of each section you created