why can't I put a 30% wide div next to a 70% wide div and have them both inline?

If I create a 30% wide div, inline-block next to a 70% wide div, they don't line up horizontally. I have to make them add up to less than 100%

html

<div id="wrapper">
  <div id="w30">  
    width 30%
  </div>
  <div id="w70">  
    width 70%
  </div>
</div>

css

#wrapper{
  width:100%;
}
#w30{
  background:yellow;
  display:inline-block;
  width:30%;
}

#w70{
  background:pink;
  display:inline-block;
  width:70%;
}

jsfiddle

why is 30% + 70% seem to be wider than 100% ?