Layout moves few pixels when picture is inserted

Question

I am using Skleleton boilerplate for my simple website (http://tinyurl.com/mmzt9qa). Homepage works perfectly, but for some reason, when i insert 960px image in the 960px div box (aka 16columns), layout gets slightly moved to the left (this is especially visible on the logo, since the site is pretty basic). On the pages without the big image everything is fine. I checked is there any paddings/margins added, but i cant see anything... Basically:

<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>

For example check the first link on the site, and then check the fifth (McDonald’s - Playland) and you'll see what i mean. I tried lowering the image size, but it does the same thing even on 500px width...

Answer 1

It looks like when an image is inserted it becomes too tall for the browser so it displays a scrollbar on the right, causing the logo to move to the left a little.

Answer 2

Seperate logo from the container, and add as many images without changing layout after it.

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;
}