Bootstrap framework: Why is there a gap on the left side of my container?

Hi all I am using Twitter’s Bootstrap framework,
I have a gap that is showing on the left side of my container. However, my footer is not affected by it. Does anyone know why I have he gap and how to get rid of it? Here’s a screenshot of what I am talking about (see attached). Also, I have a live preview of my site here so you can view the code.

Any ideas? Thanks!

See if this helps…

bootstrap.css (line 266)


.row {
    [color=red]margin-left: -20px;[/color]    /* delete me */
}

bootstrap.css (line 288)


.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: [color=blue]960px[/color];    /* changed from 940px */
}

You need to apply the background color to the elements with the class=“row”. It has to do with the negative left margin on the elements with the class=“row” to correct for the left margin on the first class=“span*” element in the row. Take the background color off the div.container and put it on the header.row and section.row elements.

Thank you both! That fixes it.

Alright guys…another question…

Check out the latest live preview.

Notice that each of the 3 sections at the bottom area (above footer) has a left margin of 20px. Unfortunately, this does not give any margin to the section on the right …it has text flush to the edge. See attached screenshot for what I’m trying to explain.

So, in this grid system, what do most people do in this situation?

You can narrow the width of the columns a tad. That will effectively yield a 15px right margin.

bootstrap.css (line 327)


.span4 {
    width:[color=blue]295px[/color];    /* changed from 300px */
}

There are other methods, too.

I have no idea. I do not use a grid system nor other framework. Too hard. :confused:

Without hacking the core bootstrap files your best bet is to add some right padding to any element inside of an element with the class=“span*”. In the case of the Our location text .span4 p { padding-right: 10px; }

Hacking core files?

Adding padding right as suggested would visually increase the space between the 3 columns by the same amount that is added to the right edge and is probably not desirable in this case. If only the right-most column (Our Location) is targeted, it would work, however the column would appear to be a bit narrower than the others.

Thanks guys. Check out this core bootstrap template: http://twitter.github.io/bootstrap/examples/carousel.html

They have a section under the banner just like I do. I looked at their code and they have a:


.marketing .span4 p {
margin-left: 10px;
margin-right: 10px;

This is what I need to do, but if I apply it to my code I still have to deal with the default <section> margin-left of 20px.

I’ve kept my custom.css file generally small, so about 99% of what you see on my live site thus far is core Bootstrap.

Does narrowing the width of the columns <span4> as ronpat says affect the responsive-ness of the rest of the site when it goes through various media queries? I’m afraid of modifying such a core rule of the code.

Edit: I don’t know if this is a good solution, but I added a custom media querie as:


@media (min-width: 1200px) {
.span4 {
margin-left: 25px;
}
}

Of course, I’d have to probably adjust all the other breakpoints.

Is this a viable solution?

Yeah, I think that works. Yes, you will need adjust at the other breakpoints. As a side note, if you are not tied to Bootstrap I would checkout Foundation. It works a lot better for websites than Bootstrap in my opinion. Bootstrap is better suited for web apps.

That’s interesting and I may be willing to make the jump before I get too deep into BS. The one reason why I chose BS over F4 is because BS is widely used in the corporate world, especially the federal government here in the US, so I figured it would be a good skill to have (I currently mostly do design work for the Gov). However, all the frameworks are pretty similar, so it shouldn’t be too difficult to make the jump. The other big issue I had with F4 is that it doesn’t work for IE7 and more than half of my users still use IE8, so that’s a huge audience to leave behind. Although, I’m going to read up more about the IE8 grid support section on F4’s support page.

Update: I’ve been looking over some of the chatter on F4’s IE8 support page and it seems you have to go through some hoops to get IE8 working just right: https://gist.github.com/zurbchris/5068210

I think I’d rather make the minor media querie adjustments to BS’s css rather than having to deal with F4’s IE8 hacks. Furthermore, BSv3 is just around the corner.

Foundation 4 is a pretty forward looking framework. I have stopped supporting IE7 altogether unless specifically requested. However, F4 does have limited support for IE8. There are some polyfills you can use to compensate. Bootstrap is not a bad framework by any means I just find Foundation, even version 3, to be a little more malleable for custom website designs.