div要素を並べたときに謎の空白が挟まる

div.container{
padding:0px;
}
div.item{
margin:0px;
width:25%;
display: inline-block;
}
<div class=’container’>
<div class=’item’>hoge</div><div class=’item’>hoge</div><div class=’item’>hoge</div><div class=’item’>hoge</div>
</div>
としたとき、div.itemが水平に 4個並んでほしいのが 3つで改行されてしまう。
Firefoxのデバッガで見ると、1個目と 2個目の間、2個めと 3個目の間に謎の空白が。
そんなときはdiv.containerに「display: flex」を指定すると良い。