title: Twitter-bootstrap: How to use row-fluid class properly?
body: <p>I have a problem understanding how <code>row-fluid</code> class works. According to the <a href="http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem" rel="noreferrer">documentation</a> it adjusts itself to fluid design such as responsive design. So if it has enough space it makes it fit on the same row otherwise it goes to the next line.</p>
  
  <p>However looking at this example here : <a href="https://duelify.com/" rel="noreferrer">https://duelify.com/</a></p>
  
  <p>Strangely enough the first three article headers fit on first row.
  Second row and rest are slightly pushed to the right. But looking at the html (below) no additional classes are involved to cause this 'side effect'.</p>
  
  <p><img src="https://i.stack.imgur.com/k3NUc.png" alt="enter image description here"></p>
  
  <p>Why aren't the article headers fitting in the one row. Why is there this random gap in between? Is there a way to make them appear ordered without any gaps in between?</p>