Change the default Twitter Bootstrap margin 20px for span classes

Question

I use

<div id="windows">
    <div class="row-fluid">
        <div class="span4 mywindow">Text</div>
        <div class="span4 mywindow">Text</div>
        <div class="span4 mywindow">Text</div>
    </div>
</div>

within a div #windows of a special width.

I want to reduce the default 20px space between these three blocks.

these css code

#windows .span4
{
    margin-right:-10px;
}

sets up a proper space between blocks, but each block keep the same width so the total width is less than 100% of the parent div (there is a right space).

I can fix it by changing the width of the blocks using !important. So the fix is

#windows .span4
{
margin-right:-10px;
width:180px !important;
}

The question then is: does it make sense to use Twitter Bootstrap span4 class for my windows if I have to fix it so hard?

I mean, is it a good practice to fix both margin-right and width for Twitter Bootstrap span classes or there is a simplier and a better solution to fix blocks? P.S. Twitter Bootstrap is used for another purposes on the page as well (so span4 is not the only reason to use Twitter Bootstrap in my case).

Answer 1

You are triyng to change gutter width between the columns. The easiest way to do this is to customize BS build before the download:

http://twitter.github.com/bootstrap/customize.html#variables

Change @gridGutterWidth value there (for fixed layout), then download your build.