[twitter-bootstrap] Padding In bootstrap

Im using bootstrap:

<div id="main" class="container" role="main">
<div class="row">
    <div class="span6">
        <h2>Welcome</h2>
        <p>Hello and welcome to my website.</p>
    </div>
    <div class="span6">
        Image Here (TODO)
    </div>
</div>  

Main also has a grey background. The background of the page is white. The problem I am having is that the text is right to the edge of the grey background. I want some padding but when I add it in, the image span goes to the next line.

Any ideas where I'm going wrong?

The suggestion from @Dawood is good if that works for you.

If you need more fine-tuning than that, one option is to use padding on the text elements, here's an example: http://jsfiddle.net/panchroma/FtBwe/

CSS

p, h2 {
    padding-left:10px;
}

There are padding built into various classes.

For example:

A asp.net web forms app:

<asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />

this code above would place the Text of "Show Deleted" too close to the checkbox to what I see at nice to look at.

However with bootstrap

<div class="checkbox-inline">
    <asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />
</div>

This created the space, if you don't want the text bold, that class=checkbox

Bootstrap is very flexible, so in this case I don't need a hack, but sometimes you need to.