I quite often build websites whose container acts as like a white page on a different coloured background and the site's content sits within that white page with a little bit of padding so that it doesn't touch the sides.
This is quite challenging when using a responsive grid. If I add say 50px of padding to the container, at certain resolutions things work perfectly but at other sizes, the page becomes too big for the screen, this is obviously to do with the widths defined in bootstrap's CSS for certain media queries.
I started going into each media query and doing some mathematics to figure out exactly how many pixels needed to be subtracted from each span and each offset in order for the page to display correctly at any given resolution but then I stopped myself and thought, there must be a better way!
I'm not averse to doing the necessary work but as I see myself coming across this problem on many if not all TB projects, I'd like to feel that I'm approaching the process in the most logical and easily-repeatable way.
Would you manually change pixel sizes for each span and offset? Or perhaps there is another more sensible way to approach a padded container?
I would much appreciate your thoughts! Thanks.