Следующий код приводит к тому, что заголовок #переполняет оболочку #, и я не понимаю, почему это происходит.

HTML:

    

        
    
    

        
This headline overflows its wrapping div. # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
    

CSS:

#wrapper {
    background: #fea;
    white-space: nowrap;
    width: 50%;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;
     white-space: normal;
}

Пример кода:http://jsfiddle.net/XjstZ/21/илиhttp://tinkerbin.com/XvSAEfrK