Макет перемещается на несколько пикселей при вставке изображения

Question

Я использую шаблон Skleleton для моего простого сайта ( http://tinyurl.com/mmzt9qa). Домашняя страница работает отлично, но по какой-то причине, когда я вставляю изображение 960px в блок Div размером 960px (16 колонок), макет слегка смещается влево (это особенно заметно на логотипе, поскольку сайт довольно простой). На страницах без большого изображения все нормально. Я проверил, есть ли добавленные отступы / поля, но я ничего не вижу... В основном:

<div class="sixteen columns">
    <p>This works perfectly</p>
</div>

<div class="sixteen columns">
    <img src="media/image.jpg" width="960" height="732"  alt="" class="responsive-image"/>
    <p>This makes the layout move</p>
</div>

Например, проверьте первую ссылку на сайте, а затем проверьте пятую (McDonald's - Playland), и вы поймете, что я имею в виду. Я попытался уменьшить размер изображения, но он делает то же самое даже на ширине 500 пикселей...

Answer 1

Похоже, что при вставке изображения оно становится слишком высоким для браузера, поэтому справа отображается полоса прокрутки, в результате чего логотип немного смещается влево.

Answer 2

Отделяйте логотип от контейнера и добавляйте как можно больше изображений без изменения макета после него.

LIVE DEMO

.logo
{
    background-image: url(http://webnroll.info/matt/images/logo.png);
    width: 460px;
    height: 221px;
    margin: auto;
}


.sixteen
{
    width: 200px;
    height: 50px;
    position: absolute;
    left: 0;
    background: white;
}