Bootstrap delete gutter-width in row and respect width

Question

Im making a page with bootstrap 2 due to job requirements and facing the following challenge, please understand Im learning it ;) I have one #mainDiv below a div with my namespace for bootstrap .bootstrapDiv

Below that I have one .row-fluid, under them 2 .span12, here is my problem;

I need to be able to put together with margin-right:0 first one and margin-left:0 second one, these two divs should fill the row respecting the general layout of the rest of rows.

How I see them is ok in the left but at right is missing this gutter width and doesnt looks nice at all, is there any special class that expands the row and its contents horizontally if you take out the iner horizontal margins of the elements in it?

How should you solve this problem normally?

EDIT

Here is my fiddle:

http://jsfiddle.net/qdb74/

im refering to the black space

Answer 1

I usually solve problems like this by creating my own CSS or extending Bootstrap. That is because Bootstrap doesn't have an option to modify the gutter for .row-fluid. Here is an example on how to extend Bootstrap:

.row-fluid [class*="span"].no-gutter {
    margin: 0;
}

.row-fluid .span6.no-gutter {
    width: 50%;
}

.row-fluid .span5.no-gutter {
    width: 41.666666666666666%
}
...

And you can decorate your element like this:

<div class="firstDiv span6 no-gutter"></div>

However if you decide to extend Bootstrap and a new version of the framework comes out this might break. If that is a concern it might be better to create your own fluid grid without gutters. That option will require you to write a bit more CSS than this.