How to remove this margin-left

hi there,

i am just trying to learn about bootstrap and create really simple online store but i got a problem. here are my code: You can see that code and what i want to do is to print my product (from database) in #main-box then it must auto move to new line when it have to print 4 product each line. This is the result pic and make me confuse …

Please someone help me to fix my problem. I just want to fetch producst from database and print 4 products each line and move to new line after that. So sorry for my bad english :slight_smile:

Thank You

Presumably there’s too much padding or margin on the columns. It would be more helpful to have a working demo (free of PHP etc.). Just insert the relevant HTML and CSS into a template like this:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

[COLOR="#FF0000"][I]your CSS here[/I][/COLOR]


[COLOR="#FF0000"][I]your HTML here[/I][/COLOR]


Full guidelines:

i don’t know about padding & margin of this element cause i just use span3 on bootstraps, mate.

i fetch the content from database so i need php at current time.

We can’t help unless we can see the CSS and the HTML that goes with it. But it needs to be in a for we can actually test. You could view the source code of the rendered page, grab the relevant code and paste it into the template I gave above. Or just link to the site. But PHP is not relevant to the issue, so should be left out.


When you nest span classes in bootstrap you need to create a fluid-grid parent to hold the inner elements.

<div class="span8" id="main-box">
[B]    <div class="row-fluid">[/B]
     <div class="span3">Fluid 3</div>
     <div class="span3">Fluid 3</div>
     <div class="span3">Fluid 3</div>
     <div class="span3">Fluid 3</div>
[B]   </div>[/B]

In that way the margin-left on the first div is removed automatically by the bootstrap rules.
bootstrap css:

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