CSS positioning riddle

? Why don't the boxes fit the container ?

HTML

<body>
<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
</body>

CSS

body>.container{font-size:0;}
.container {
    width: 360px;
    height: 50px;
    border: 1px solid black;
}
.container div {
    width: 120px;
    height: 100%;
    display: inline-block;
}
.one {
    background: blue;
}
.two {
    background: green;
}
.three {
    background: red;
}