html - 插入图片时布局移动几个像素

Question

我正在为我的简单网站（http://tinyurl.com/mmzt9qa）使用 Skeleton 样板。主页运行良好，但由于某种原因，当我在 960 像素 div 框（又名 16 列）中插入 960 像素图像时，布局稍微向左移动（这在徽标上尤其明显，因为该网站非常基本）。在没有大图像的页面上一切都很好。我检查了是否添加了任何填充/边距，但我看不到任何东西......基本上：

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

例如检查网站上的第一个链接，然后检查第五个（麦当劳 - Playland），你会明白我的意思。我尝试降低图像大小，但即使在 500px 宽度上它也会做同样的事情......

Answer 1

看起来当插入图像时，它对于浏览器来说太高了，所以它在右侧显示一个滚动条，导致徽标向左移动一点。

Answer 2

将徽标与容器分开，并添加尽可能多的图像而不更改其后的布局。

现场演示

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