Bootstrap + packery

Question

Im trying to use packery to align some divs. Everything is working fine but I get an annoying space that I don't know how to get rid of. This spaces only appear from 2nd row and they keep going.

<div class="container-fluid">
     <div class="row-fluid">
         <div class="span2" style="background-color: #999">
             the span2
         </div>
         <div class="span10">
           <div id="container">
            <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div>
               <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div> 
               <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div> 
               <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div> 
               <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div> 
               <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div> 
               <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div> 
               <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div> 
               <div class="well item span3">
                <legend>Animals</legend>
                <ul>
                    <li>cat</li>
                    <li>dog</li>
                    <li>rat</li>
                </ul>
            </div> 
           </div>
         </div>
    </div>
</div>

<script src='http://packery.metafizzy.co/packery.pkgd.min.js'></script>
<script>
var $container = $('#container');
// initialize
$container.packery({
  itemSelector: '.item'
});

</script>

http://jsfiddle.net/WZxBM/

Any ideas how to solve this?

Answer 1

It's because by default bootstrap columns have a left hand margin, but this is removed for the first span div within the row:

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

So the left hand margin is removed in the first span3 div but none of the others. One solution would be to keep the left hand margin in the first span, see http://jsfiddle.net/panchroma/QePYB/