html - 複数の div をマージンなしで別の div 内に水平に配置する

Question

このfiddleには、別の div の中に 4 つの div があります。toolbarItemclassのdiv 間のスペースを削除できません。

html

  <div id="topPanelContainer">
    <div id="toolbar">
      <div id="toolbarItem1" class="toolbarItem"></div>
      <div id="toolbarItem2" class="toolbarItem"></div>
      <div id="toolbarItem3" class="toolbarItem"></div>
      <div id="toolbarItem4" class="toolbarItem"></div>
    </div>
  </div>

CSS

#topPanelContainer {
    height: 30px;
    background: lightgrey;
    text-align: center;
}
#toolbar{
    height:30px;
    width:800px;
    background:grey;
    margin: 0 auto;
}

.toolbarItem {
    height: 30px; width: 100px;
    background: blue;
    display: inline-block;
    position:relative;
    margin: 0;
}

次の代わりに、4 つの div が次々と残ることを期待します。