Tam Hartman Tam Hartman - 3 years ago 175
HTML Question

Extra pixels hiding out somewhere (HTML/CSS)

So I have this site I'm working on and everyone is pretty happy with it, but for some reason there are maybe 15-30 extra pixels chilling out on the right hand side. I played with it a bunch to see if I can fix it, but it appears that everything I do to fix extra pixels on the right side creates more extra pixels somewhere else.

fiddle here:
https://jsfiddle.net/d7whsyr0/#

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/trump250.png" width="50" height="50"></a></li>
<li><a href="#"><img src="img/nito250.png" width="50" height="50"></a></li>
<li><a href="#"><img src="img/ouaz250.png" width="50" height="50"></a></li>
<li><a href="#"><img src="img/niku250.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="trump">
<div class="row">
<div class="col-1"></div>
<div class="col-6">
<h3>Featured Apps</h3>
<h2>Trump Yourself</h2>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-1">
<img src="img/trump250.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>Nito Plus</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://itunes.apple.com/us/app/nito-plus-animate-your-self-ie/id1033657715?mt=8"><img src="img/nito250.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://itunes.apple.com/us/app/ouaz-once-upon-a-zombie-3d/id1051917289?mt=8"><img src="img/ouaz250.png" align="right" width="150" height="150"></a>
</div>
<div class="col-2">
<p>OUAZ 3D brings everyone's favorite zombie princesses to life! Now you can create awesome 3D messages starring Belle, Alice, Cinderella, and other favorites from the Once Upon A Zombie universe! Download today and get zombified!</p>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-6">
<h2>Niku</h2>
</div>
</div>
<div class="row">
<div class="col-1b"></div>
<div class="col-2" id="copy">
<p>Niku brings the magic of Nito to China! With special Niku only characters, and comprehensive translation, Niku is bringing the magic of Nito to the Land of Red Dragons!</p>
</div>
<div class="col-1">
<a href="https://itunes.apple.com/us/app/ni-ku/id1065657446?mt=8"><img src="img/niku250.png" align="left" width="150" height="150"></a>
</div>
</div>
</div>


<!---more fun with Nito-->
<div class="NitoFam">
<div class="row">
<div class="col-6">
<h2>More Fun with Nito!</h2>
</div>
<div class="col-6">
<a href="#trump"><img src="img/trump250.png" width="100" height="100"></a>
<a href="https://itunes.apple.com/us/app/nito-plus-animate-your-self-ie/id1033657715?mt=8"><img src="img/nito250.png" width="100" height="100"></a>
<a href="https://itunes.apple.com/us/app/ouaz-once-upon-a-zombie-3d/id1051917289?mt=8"><img src="img/ouaz250.png" width="100" height="100"></a>
<a href="https://itunes.apple.com/us/app/ni-ku/id1065657446?mt=8"><img src="img/niku250.png" width="100" height="100"></a>
</div>
<div class="col-6">
<a href="https://geo.itunes.apple.com/us/app/nito-plus-animate-your-self-ie/id1033657715?mt=8"><img src="img/appstore2.png" width="150" height="50"></a>
</div>
</div>
</div>
</main>
<footer>
<div class="col-6">
<img src="img/footer_test.png">
<p>
Copyright ©2016 Nito, Inc. New 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;}
}

Answer Source

add padding == 0;

.col-6{ width: 100%; padding: 0; }

https://jsfiddle.net/1jkrwar9/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download