所以我有这个我正在开发的网站，每个人都对它很满意，但由于某种原因，右侧可能有 15-30 个额外的像素冷却。我玩了很多，看看我是否可以修复它，但似乎我为修复右侧的额外像素所做的一切都会在其他地方创建更多额外的像素。
.HTML
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<head>
</head>
<body>
<div class="grid-container outline">
<nav>
<ul><div class="floatleft">
<li><a href="#" width="50" height="50"></a></li>
<li><a href="#"><img src="img/twitter.png" width="50" height="50"></a></li>
<li><a href="#"><img src="img/instagram.png" width="50" height="50"></a></li>
<li><a href="#"><img src="img/youtube.png" width="50" height="50"></a></li>
</div>
<div class="floatright">
<li><a href="#trump"><img src="img/ghfjg.png" width="50" height="50"></a></li>
<li><a href="#"><img src="img/nufj.png" width="50" height="50"></a></li>
<li><a href="#"><img src="img/ykg.png" width="50" height="50"></a></li>
<li><a href="#"><img src="img/oiyg.png" width="50" height="50"></a></li>
</div>
</ul>
</nav>
<header>
<div class="col-6"
<div id="logo" align="center">
<img src="img/logo2.png">
<h1>#Be Animated</h1>
</div>
</header>
<main><!--start the grid-->
<!--main top section-->
<div class="row">
<div id="demo" class="col-6">
<iframe width="800" height="450" src="#" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-6b">
<h1> Copy is here</h1><br>
<a href="#"><img src="img/appstore2.png" width="150" height="50"></a></div>
</div>
</div>
<div class="col-1">
</div>
<!---Featured Apps-->
<div class="featuredApps"><a name="app1">
<div class="row">
<div class="col-1"></div>
<div class="col-6">
<h3>Featured Apps</h3>
<h2>app1</h2>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-1">
<img src="img/ytfh.png" align="right" width="150" height="150">
</div>
<div class="col-2" id="copy">
<p>copy here</p>
</div></a>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-6">
<h2>SOMETHING HERE</h2>
</div>
</div>
<div class="row">
<div class="col-1b"></div>
<div class="col-2">
<p>copy here</p>
</div>
<div class="col-1">
<a href="https://LINKAGE"><img src="img/UTFGH.png" align="left" width="150" height="150"></a>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-6">
<h2>OUAZ 3D<br>
Once Upon a Zombie</h2>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-1">
<a href="https://MORE LINKAGE"><img src="img/oLKJHL.png" align="right" width="150" height="150"></a>
</div>
<div class="col-2">
<p>BLAHBLAHVJGHFJHFHJ</p>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-6">
<h2>IOYJGu</h2>
</div>
</div>
<div class="row">
<div class="col-1b"></div>
<div class="col-2" id="copy">
<p>JKFGHDS</p>
</div>
<div class="col-1">
<a href="https://LINK"><img src="img/JHG.png" align="left" width="150" height="150"></a>
</div>
</div>
</div>
<!---more fun with Nito-->
<div class="LINK">
<div class="row">
<div class="col-6">
<h2>ILULUGKGLKJ</h2>
</div>
<div class="col-6">
<a href="#IYTFHG"><img src="img/LIH.png" width="100" height="100"></a>
<a href="LK7715?mt=8"><img src="img/nito250.png" width="100" height="100"></a>
</div>
</div>
</main>
<footer>
<div class="col-6">
<img src="img/footer_test.png">
<p>
Copyright ©2016D SANA York, NY.
<a href="privacy.html">Privacy Policy</a>
</p>
</div>
</footer>
</body>
</html>
.CSS：
*{
font-family: 'Lato', sans-serif;
font-weight: lighter;
text-align: center;
vertical-align: middle;
color: #3e3e3e;
}
body{
background: #91b0cd;
background: -webkit-linear-gradient(#91b0cd, white); /*gradient for safari*/
background: -o-linear-gradient(#91b0cd, white); /*gradient for opera*/
background: -moz-linear-gradient(#91b0cd, white); /*gradient for firefox*/
background: linear-gradient(#91b0cd, white);
align: center;
}
/*p{
font-weight: lighter;
color: #3e3e3e;
}*/
header{
padding: 30px 0 0 0;
}
h1{
font-size: 24px;
color: white;
}
h2{
font-size: 26px;
}
h3{
margin-top: 0;
color: #ffffff;
}
iframe{
max-width:100%;
}
ul {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
nav li{
display: inline;
}
img{
max-width: 100%;
height: auto;
}
footer{
font-size: 80%;
text-align: center;
/*padding: 180px 0 0 0;
/*background-image: url("img/footer_test.png");*/
max-width: 100%;
background-repeat: no-repeat;
background-position:center bottom;
background-size: 100%;
}
footer p{
/*background-image: url("img/footer_test.png");*/
color: black;
background-color: white;
/*opacity: 0.75;*/
font-weight: bold;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.featuredApps{
/*margin-left: auto;
margin-right: auto;*/
color: #3e3e3e;
margin-top: 0px;
}
.featuredApps p{
color: #3e3e3e;
}
.nitofam img{
margin: 10px;
padding: 10px;
}
#demo img{
display: block;
margin-left: auto;
margin-right: auto;
}
#nav{
align: center;
repeat: no-repeat;
}
#logo img{
width: 15%;
height: 15%;
}
.grid-container{
width: 100%;
max-width: 1800px;
}
/*-- our cleafix hack -- */
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
/*-- our gutter -- */
padding: 12px;
/*background-color: #FFDCDC;*/
}
.col-1{ width: 16.66%; }
.col-1a{width: 20%;}
.col-1b{width: 25%;}
.col-2{ width: 33.33%; }
.col-3{ width: 50%; }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%; }
.col-6b{ width: 70%; margin-left: 15%; margin-right: 15%;}
/*.outline, .outline *{
outline: 1px solid #F6A1A1;
}*/
/*-- some extra column content styling --*/
[class*='col-'] > p {
/*background-color: #FFC2C2; */
padding: 0;
margin: 0;
text-align: center;
vertical-align: center;
}
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
/*float: center;*/
}
.floatleft {
float:none;
}
.floatright {
float:none;}
}
您有一个需要在此处关闭div标签<div class="col-6"，请关闭它，它可能会解决您的问题。
此外，您的 iframe HTML 中有一个固定的宽度。
在你的 CSS max-width:100%中给出它
iframe {
max-width:100%;
}
添加填充 == 0;
.col-6{ width: 100%; padding: 0; }
https://jsfiddle.net/1jkrwar9/