Вертикальная прокрутка ведет к горизонтальной прокрутке

Question

Я строю рамку и сетку для своего сайта, но каждый раз, когда страница расширяется, появляется вертикальная полоса прокрутки, а также вертикальная полоса прокрутки. Я пробовал все виды с переполнением-y: автоматически или скрытно, но ничего не работает. Это что-то делать со мной, используя все эти vw-размеры? Вот Fiddle - http://jsfiddle.net/u11812br/

HTML

<header> 
<img src="img/logo_big.png"/> 
<button class="menu"> 
<a href="#menu">&#9776;</a> 
</button> 

<nav style="display:none;"> 
    <a href=""><p>HOME/GEDANE ZAKEN</p></a> 
    <a href=""><p>CONTACT</p></a> 
</nav> 

</header> 

<div class="spacer"></div> 

<center> 
<div class="gridcontainer"> 

<div class="section group"> 
<div class="col span_2_of_2"> 
<img src="img/img1.png"/> 
</div> 
</div> 

<div class="section group"> 
<div class="col span_1_of_2"> 
<img src="img/img1.png"/> 
</div> 
<div class="col span_1_of_2"> 
<img src="img/img1.png"/> 
</div> 
</div> 

<div class="section group"> 
<div class="col span_2_of_3"> 
<img src="img/img1.png"/> 
</div> 
</div> 

<div class="section group"> 
<div class="col span_2_of_3"> 
<img src="img/img1.png"/> 
</div> 
</div> 

<div class="section group"> 
<div class="col span_1_of_2"> 
<img src="img/img1.png"/> 
</div> 
<div class="col span_1_of_2"> 
<img src="img/img1.png"/> 
</div> 
</div> 

<div class="section group"> 
<div class="col span_2_of_2"> 
<img src="img/img1.png"/> 
</div> 
</div> 

</div> 
</center> 

CSS

body, html { 
height: 100%; 
margin: 0; 
padding: 0; 
border: none; 
left: 0; 
top: 0; 
width: 100%; 
} 

body { 
background: #f6cb4a; /* Old browsers */ 
background: -moz-linear-gradient(top, #ebe7e7 0%, #f3f2f2 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#ebe7e7), color-stop(100%,#f3f2f2)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* IE10+ */ 
background: linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebe7e7', endColorstr='#f3f2f2',GradientType=0); /* IE6-9 */ 
height: 100%; 
background-repeat: no-repeat; 
background-attachment: fixed; 
width: 100%; 
background-position: 0px 0px; 
} 

header { 
width: 100vw; 
height: 65px; 
background: white; 
position: fixed; 
z-index: 9999; 
top: 0px; 
} 

header img { 
width: 85px; 
margin-left: 40px; 
margin-top: 3px; 
} 

.spacer { 
height: 80px; 
width: 100vw; 
} 

button { 
position: absolute; 
right: 10vw; 
border: none; 
margin: 0; 
padding: 0; 
background: none; 
} 

button a { 
font-size: 4em; 
text-decoration: none; 
color: grey; 
} 

nav { 
position: fixed; 
top: 65px; 
} 

nav p { 
width: 100vw; 
padding: 25px 0px 25px 0px; 
background: white; 
margin: 0px; 
border-top: 1px solid #ededed; 
transition: 0.3s; 
} 

nav p:hover { 
background: #ededed; 
} 

nav a { 
text-align: center; 
text-decoration: none; 
color: #333; 
} 

.gridcontainer { 
width: 95vw; 
} 

.section { 
clear: both; 
padding: 0px; 
margin: 0px; 
} 

.col { 
display: block; 
float:left; 
margin: 1% 0 1% 1.5%; 
background: green; 
} 
.col:first-child { margin-left: 0; } 

.group:before, 
.group:after { content:""; display:table; } 
.group:after { clear:both;} 
.group { zoom:1; /* For IE 6/7 */ } 
/* GRID OF TWO */ 
.span_2_of_2 { 
width: 100%; 
} 
.span_1_of_2 { 
width: 49.25%; 
} 

.span_2_of_3 { 
width: 49.25%; 
} 

.span_1_of_2 img { 
width: 47vw; 
height: 65vw; 
display: inline-block; 
} 

.span_2_of_2 img { 
width: 95vw; 
height: 60vw; 
} 


.span_2_of_3 img { 
width: 95vw; 
height: 30vw; 
} 


@media only screen and (max-width: 480px) { 
.col { 
    margin: 1% 0 1% 0%; 
} 
} 

@media only screen and (max-width: 480px) { 
.span_2_of_2, .span_1_of_2 { width: 100%; } 
} 

Answer 1

правой полосы прокрутки игнорируется, когда "оч.сл." рассчитывается.

Таким образом, вы можете использовать максимальную ширину ~ 98vw,
или просто «переполнение-x»: скрыты. Overflow-y - вертикальная ось;)