Абсолютный элемент позиции вызывает нежелательные пробелы рядом с сайтом

Хорошо, я думаю, что единственный способ решить это - это когда последний выпадающий список остается левым, а не правильным. Мне это не нравится, но все в порядке. Я использую mediaqueries, так что меню остается влево, если экран недостаточно большой.

сначала добавьте класс в последний пункт меню

$('.mainnav > li').last().addClass('last-menu-item');

и здесь css

@media only screen and (max-width:1412px) {

li.last-menu-item:hover ul.subnav {
    right: 0 !important;
    left: auto !important;
}

li.last-menu-item > ul.subnav {
    right: 10px !important;
    left: auto !important;
}

Это устраняет проблему с интервалом, хотя теперь вам нужно будет отрегулировать подменю, чтобы вылететь влево, а не вправо. Но неважно. Я сделал немного, чтобы исправить это для вас, так что вы на полпути.

Проблема в том, что браузер по-прежнему позволяет пространство для "скрытых" элементов. Если вы хотите удалить его из космических вычислений, вам нужно использовать display:none

li.last-menu-item > ul.subnav { display: none; }
li.last-menu-item:hover > ul.subnav { display: block; width: auto; }

Альтернативное решение, так как я видел, что вам не нравится display:none. Я думаю, что это решение немного более элегантно:

ul.mainnav > li.last-menu-item ul.subnav {
    left: initial;
    right: 0px;
}

Ответ отредактирован для соответствия ревизий OP:

ul.mainnav {
  + width: 100%;
}

//изменено для работы над jsfiddle

div#Logo {
    background: url(http://placehold.it/280x155) no-repeat left; 
}

Скрипт: http://jsfiddle.net/8ktYy/14/