所以我有一个布局，我试图跨越视口宽度的100％。在网站的容器元素上设置width: 100%;完全按预期工作 - 整个布局的宽度，甚至整个DOM结构甚至高达html元素，都是100％（在这种情况下，1425px开启） 1440px宽屏幕，占15px滚动条）。但由于某种原因，布局屏幕右侧有15px的间隙，这会产生一个不应该存在的水平滚动条。
我已经彻底检查过，并且没有超过1425px宽的元素。没有任何内容可以推送页面内容的margin-right或padding-right设置。并且就我所有渲染的内容都知道，渲染的宽度是1425px - 正如我所说，html元素是1425px宽。我已经尝试将所有包含元素设置为width: 100%;无效。将overflow-x设置为隐藏不起作用，因为技术上没有任何东西溢出 - 页面的所有内容都适合在视口中。在所有内容的右侧，只有一些随机的空白被空中渲染。
我完全不知道可能造成这种差距的原因是什么，因为它在屏幕外并且不是由任何边距或填充引起的。这种行为在所有浏览器中都是一致的。
以前有没有人遇到这样的事情？
HTML：
<!doctype html>
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" itemscope itemtype="http://schema.org/Thing" lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="">
<meta charset="utf-8" />
</head>
<body class="collection-type-page view-list mobile-style-available collection-53377421e4b0e7e398eacb73 collection-layout-default underline-body-links blog-meta-data-split hide-author social-icon-style-round gallery-design-grid aspect-ratio-auto lightbox-style-light gallery-navigation-circles gallery-info-overlay-show-on-hover gallery-aspect-ratio-32-standard gallery-arrow-style-circular gallery-transitions-fade gallery-show-arrows gallery-auto-crop gallery-loop product-list-titles-under product-list-alignment-center product-item-size-11-square product-image-auto-crop product-gallery-size-11-square product-gallery-auto-crop show-product-price show-product-item-nav product-social-sharing event-thumbnails event-thumbnail-size-32-standard event-date-label event-date-label-time event-excerpts event-list-date event-list-time event-list-address event-icalgcal-links opentable-style-light newsletter-style-dark small-button-style-solid small-button-shape-square medium-button-style-solid medium-button-shape-square large-button-style-solid large-button-shape-square button-style-outline button-corner-style-rounded native-currency-code-usd" id="collection-53377421e4b0e7e398eacb73">
<div id="site">
<div id="canvas">
<div id="headerWrapper">
<header id="header">
<div id="headerInfo" data-content-field="site-title">
<h1 class="logo site-title">
<a href="/" title="Title" role="bookmark">
<span class="placed-site-title">Title</span>
</a>
</h1>
<p class="site-tagline">Tagline</p>
<div id="navBlock" role="navigation">
<nav class="main-nav">
<ul>
<li class="page-collection">
<a href="/">Link 1</a>
</li>
<li class="page-collection active-link">
<a href="/bio/">Link 2</a>
</li>
<li class="page-collection">
<a href="/works/">Link 3</a>
</li>
<li class="blog-collection">
<a href="/blog/">Link</a>
</li>
<li class="page-collection">
<a href="/connect/">Link</a>
</li>
<li class="page-collection">
<a href="/colophon/">Link</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
</div><!-- / headerWrapper -->
<div id="pageWrapper" class="hfeed" role="main">
<section id="page">
<div class="sqs-layout sqs-grid-12 columns-12" data-type="page" data-updated-on="1401681420237" id="page-53377421e4b0e7e398eacb73"><div class="row sqs-row"><div class="col sqs-col-4 span-4"><div class="sqs-block image-block sqs-block-image" data-aspect-ratio="176.11940298507463" data-block-type="5" id="block-yui_3_10_1_1_1398741322418_29922"><div class="sqs-block-content">
</div></div></div><div class="col sqs-col-8 span-8"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_10_1_1_1401672930436_6680"><div class="sqs-block-content">
<h2>Short Bio</h2>
<p>Bio here</p></div></div><div class="sqs-block horizontalrule-block sqs-block-horizontalrule" data-block-type="47" id="block-yui_3_10_1_1_1401672930436_6398"><div class="sqs-block-content"><hr /></div></div><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_10_1_1_1401672930436_7764"><div class="sqs-block-content">
<h2>Long Bio</h2>
<p>Bio here</p></div></div></div></div></div>
</section>
</div><!-- / pageWrapper -->
<div id="footerWrapper">
<footer id="footer">
<div class="sqs-layout sqs-grid-12 columns-12" data-layout-label="Footer" data-type="block-field" data-updated-on="1398747302443" id="footerBlock"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_10_1_1_1398744171225_2855"><div class="sqs-block-content"><p class="text-align-center"><a href="/colophon">Copyright Here</a></p></div></div></div></div></div>
</footer>
</div><!-- / footerWrapper -->
</div><!-- / canvas -->
</div><!-- / site -->
</body>
</html>
CSS（计算）：
html {
-webkit-locale: en-US;
display: block;
font-size: 16px;
height: 1448.390625px;
width: 1425px;
}
body {
-webkit-background-size: auto;
background-attachment: scroll;
background-color: rgb(255, 255, 255);
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
color: rgb(66, 66, 66);
display: block;
font-family: proxima-nova;
font-size: 16px;
font-style: normal;
font-weight: normal;
height: 1448.390625px;
letter-spacing: normal;
line-height: 27.200000762939453px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 1425px;
}
#site { /* main container */
color: rgb(66, 66, 66);
display: block;
font-family: proxima-nova;
font-size: 16px;
font-style: normal;
font-weight: normal;
height: 1448.390625px;
letter-spacing: normal;
line-height: 27.200000762939453px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 1425px;
}
#canvas {
color: rgb(66, 66, 66);
display: block;
font-family: proxima-nova;
font-size: 16px;
font-style: normal;
font-weight: normal;
height: 1448.390625px;
letter-spacing: normal;
line-height: 27.200000762939453px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: 1600px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 1425px;
}