html - Spacing between inline-block divs, can't solve by removing whitespace

Question

I know this question has been asked on SO before, and the answer is usually to remove any spaces between the markup. In this case, I can't, since I'm programatically printing out divs:

<div class="products row">
  {{#each products}}
    {{> product}}
  {{/each}}
</div>

I won't bore you with the details of the product template, but suffice it to say, the template engine will dump out divs with either a space or newline in between each one.

What I'm trying to do is just close those gaps so I get all six divs in a row (no wrapping). Also, the divs need to be centered within the page (or their container). So whether I have two divs or six, they should always be centered.

Here's a JSFiddle showing the divs with bad spacing:

http://jsfiddle.net/6opf8ybs/

Is there some way to fix this in CSS? I heard the font-size: 0 trick is not ideal.

HTML:

 <div class="container">
    <div class="row row-center">
      <div class="col-xs-2 col-center">b</div>
      <div class="col-xs-2 col-center">d</div>
      <div class="col-xs-2 col-center">b</div>
      <div class="col-xs-2 col-center">d</div>
      <div class="col-xs-2 col-center">d</div>
      <div class="col-xs-2 col-center">d</div>
    </div>
  </div>

CSS:

.row-center {
  text-align: center;
}

.col-center {
  display: inline-block;
  border: 1px solid blue;
  text-align: left;
  float: none;
}

Answer 1

You could ty using a negative margin on the inline-block items. Take a look at this jsFiddle

.col-center {
  display: inline-block;
  border: 1px solid blue;
  text-align: left;
  margin: 0 -2px;
  padding: 10px;
}