border alignment issue while using Twitter bootstrap responsive css

Question

I found this post on Bootstrap Tutorial for Blog Design . I am planning to use it for one of my project for the responsive layout that it provides. I have found an issue in the page hosted for demo . have attached a screenshot The first post in the page "Facebook Timeline Design using JQuery and CSS" is falling outside the border of the background [Have marked it in blue].[not the expected result] The rest of the posts in the page falls inside the border which is the expected behaviour[have marked it in green]. Is there any way I can fix the issue of the first post falling outside the background border. I have tested this in IE,firefox and chrome with the same results. have created a jsbin page here

Answer 1

In the css files its stated that the first span-element to have no margin on the left.

bootstrap-responsive.css on line 232:

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

bootstrap.css on line 419:

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

Remove or comment these out.

Answer 2

您可以使用jquery选择器解决它

$('.row > [class*="span"]:first-child').css({"padding-left":"20px"});

Answer 3

Add this stylesheet ( prefered at the bottom )

.row > [class*="span"]:first-child {
    padding-left: 20px;
}  

If you want you can add this jQuery

$('.row > [class*="span"]:first-child').css('padding-left','20px');