Question

I’m developing a website with Twitter bootstrap, a screenshot is

This sometimes happens and I’ve not managed yet to nail the exact circumstances… Sometimes I try to nest a <div> using row-fluid but I get the results shown in the screenshot.

The child span6 div has a left-margin I can’t seem to get rid of.

I would like to be able to nest two span6 <div> inside that row-fluid <div>… It should be possible, no?

Answer 1

To build the layout inside a .row-fluid, Bootstraps applies to every .spanN a margin-left:

.row-fluid [class*="span"] {
    margin-left: 2.76243%;
}

And then, it overrides this property to the :first-child:

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

As you are including that <h2> before the first .span6, it becomes the second element and :first-child selector doesn’t affect it.
So, to solve your issue, get that heading out of the .row-fluid where you place your spans.