Why do “inline-block” elements in a “nowrap” div overflow?

Answer 1

Setting width to headline element fixes the issue.

#headline {
   display: inline-block;
   vertical-align: middle;
   width: 60%;
}

It's responsive if both image wrapper and image have their max-width defined.

#logo {
   display: inline-block;
   vertical-align: middle;
   max-width: 35%;
}

#logo img {
   width: 6em;
   max-width: 100%;
}

http://jsfiddle.net/tt1k2xmL/