css - Inline-block containers do not sit site by side, cause expansion of container -

apologies, have attempted create js fiddle replication, issue not seem occur in js fiddle can think problem more general css on page.

the js fiddle created not show error, here anyway: https://jsfiddle.net/j2qxh9zg/

i attempting line 2 elements side-by-side. use display:inline-block; , have width of 33.3% , 66.6%. body has font-size:0 set in order remove whitespace issues not believe issue whitespace between containers.

<div class="grid one-third">             <div class="logo">                 <img src="assets/logo.png" alt="something"/>             </div>         </div>         <div class="grid two-thirds menu">             <ul>                 <li><a name="#home">home</a></li>                 <li><a name="#expertise">our expertise</a></li>                 <li><a name="#portfolio">portfolio</a></li>                 <li><a name="#tech">new technology</a></li>                 <li><a name="#contact">get in touch</a></li>                 <li>01483 746650</li>             </ul>         </div> 

i cannot seem .one-third , .two-thirds divs sit side side, despite them both being display:inline-block;

.grid.one-third{width:33.3%} .grid.two-thirds{width:66.6%} .grid{display:inline-block;box-sizing:border-box;} 

live link, can see menu @ bottom of page (grey box) http://digitalshowcase.somethingbigdev.co.uk/

the nav container 70px high. should 50px high. both inside elements 50px high, yet container expands. why?

i think adding vertical-align: middle; .grid it.