Twitter Bootstrap - Full width background (image)

background, css, html, twitter-bootstrap

Solution

That margin you're seeing is due to the fact that the `.row` class part of the grid system removes 20px from the left to accommodate the `span` classes inside each row; that class reads as follows:

.row {
    margin-left: -20px;
}

You can circumvent that by just wrapping your `.container` div with another container with the background color of your choice, like so:

HTML

<div class="green">
    <div class="container">
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
    </div>
</div>

CSS

.green{
    background:green;
}

Problem

I'm currenly on a project and I'm trying out the awesome Twitter Bootrtrap including the responsive grid. All works fine and dandy except for one issue. How do you give the `.container` (which holds the grid) a background color? Example: ``` <div class="container green"> <div class="row"> <div class="span6"> <p>This is a test</p> </div> </div> <div class="row"> <div class="span6"> <p>This is a test</p> </div> </div> </div> .green{ background:green; } ``` When I add a color to the container it will turn green but leaves a margin on the left side, about 20px. How do I implement a full-width background?

Original source