OK I understand now, you want to adjust the various sizes of the entire page width.
Your site is responsive. So it does re-size itself for smaller screens.
Here is a crash course in responsiveness via media queries:
Media queries define what CSS is applied based on the actual size of the page.
Here is how they are defined:
Code:
@media (min-width: 1037px) {
#page-wrapper {
width: 1037px;
}
}
Note the @media (min-width: 1037 px) followed by a bracket. There is also a closing bracket that ends this section. The pertinent styles are defined inside.
Media queries can also have a max-width range:
@media only screen and (min-width:480px) and (max-width: 640px) {...}
So you can see there are several min-widths set for your site. That is why it jumps in large chunks. For further example you have this CSS:
Code:
@media (min-width: 992px) {
#page-wrapper {
width: 940px;
}
}
This ensure that the page re-sizes to 940px when the screen size is greater than 992px. With Google Chrome in developer mode (right click, and inspect element) the current screen width should be displayed in the top right coren of the browser when you are actively re-sizing the page.
More info:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/