In answer to the Stack Overflow question:

Bootstrap 3: how to calculate gutter width for different container width

I have want to keep the container max-width at 981px simply because of that's how the designer implemented the layout in Photoshop.

For example, there is an image that is 981px wide, which spans the entire width of the container.

You can best achieve this by editing the less files themselves, rather than the compiled css.

If everything is nested properly, then all that's required is to override some variables (you can redefine variables, the last instance will rule, so just add these after importing the bootstrap styles):

less:

@import "../bower_components/bootstrap/less/bootstrap.less";

// impractically large breakpoint for simplicity
// now you've only got three breakpoints to play with :/
@screen-lg: 12000px;

@my-target-width: 981px;
@container-desktop: ((@my-target-width + @grid-gutter-width));

html:

<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<img class="img-responsive" src="http://lorempixel.com/g/1200/500/cats/1" alt="">
		</div>
	</div>
</div>

(Don't forget to add .img-responsive to your images.)

I would say it'd be pretty impractical to override the required styles in css alone (if you're not using less or sass in the first place, you'd certainly miss some of the overrides you'd need to make in the compiled css).

I'd definitely recommend embracing the learning curve and using bootstrap with less or sass as it's intended.