You could try wrapping the two columns in a .row-fluid and make them .span6 (which would enlarge to full width). Or if you want to keep the same width, then keep the span6 and put the elements in those, floating left or right.
But the simplest solution would be to apply `float: right!important;` to the second column. Thus blocking any overrides. You could also work on the specificity of your rules http://www.htmldog.com/guides/cssadvanced/specificity/ to be sure that yours is applied. On Thursday, June 28, 2012 1:32:18 PM UTC+2, artdog wrote: > > I am converting an entire YUI based site to twitter bootstrap. I have > encountered a road block with a layout. I have attached a screen shot. For > the four boxes "dealing with Builders" "Safety Regulations" etc I have > created a nested row two boxes in each column with span4 on each. I am > using a custom grid of 14 columns. I modified the responsive 1200px less > file with > // Fixed grid > #grid > .core(55px, 16px); > in order to get the max-width of the site down to something close to what > the site was designed for. > > The problem is the gutter between the two columns of boxes is not wide > enough. Normally I would just float the right column to the right to align > it with the left side of the main column but I found that > [class*="span"] { > float: left; > margin-left: 16px; > } > in the bootstrap css over rides this. An offset1 will be too much so what > do I do? Is the only solution to recalculate the grid with a wider gutter? > I am quite happy with the gutter width between the main column and the > sidebar. > > > <https://lh3.googleusercontent.com/-VrNjlTc3-WU/T-xAoio8qrI/AAAAAAAAAEs/82PmYJZ6PE8/s1600/Screen+shot+2012-06-28+at+12.29.52.png> > >
