С inline-block между элементами ставится "пробел", поэтому в вашем случае div просто не влезает в ширину контейнера.
Поставьте контейнеру font-size: 0, а в дочерних элементах верните размер шрифта на место, и все будет ок.
UPD:
Кроме того, нужно добавить вот это:
#container img {
vertical-align: top;
}
Вот полный код CSS (html из вопроса):
body {
background: #e5e9ff;
}
#container {
width: 687px;
height: 394px;
background: #f4f5fa;
font-size: 0;
}
#container img {
width: 369px;
height: 394px;
vertical-align: top;
}
#container .right {
background: #777;
width: 318px;
height: 394px;
display: inline-block;
font-size: 14px;
}