Unknown padding?
Dear Dreamweavers,
I have some trouble with my code and I can't seem to fix it. For some reason there is space between my 'blocks', but I can't seem to get rid of it. Below is my html and my css, I have also added a picture of how it shows. It's supposed to be a grid of 2 by 3, equally divided with 33.33% width and a autoscaling height.
Here is my code:
<!doctype html>
<html>
<head>
<title>RESTLESS</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<nav class="navbar">
<li class="nav">
<a class="nav-active">DASHBOARD</a>
</li>
<li class="nav">
<a class="nav-link" href="index.html">CREDENTIALS</a>
</li>
</nav>
<body class="body">
<div class="white-space"><!--white space--></div>
<div>
<ul class="container">
<li >
<a class="block" href="index.html">
<img class="img" src="images/CMS.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/HOSTING.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/CMS.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/HOSTING.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/CMS.jpg">
<span class="img-overlay"></span>
</a>
</li>
<li>
<a class="block" href="index.html">
<img class="img" src="images/HOSTING.jpg">
<span class="img-overlay"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
And here is my CSS:
a.nav-link {
display: inline;
font-family: 'Open Sans', sans-serif;
font-weight: 200;
color: #333333;
letter-spacing: 1px;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.nav-icon {
display: inline;
padding-left: 5px;
padding-right: 5px;
width: 20px;
position: fixed;
right: 10px;
}
.nav {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
a.nav-active {
display: inline;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #EA3D3D;
letter-spacing: 1px;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
a.nav-link:link {
display: inline;
font-family: 'Open Sans', sans-serif;
font-weight: 200;
color: #333333;
letter-spacing: 1px;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
a.nav-link:hover {
display: inline;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #333333;
letter-spacing: 1px;
font-size: 18px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.navbar {
background-color: white;
padding: 20px;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
}
.body {
background-color: #FFFFFF;
position: fixed;
padding: 0;
width: 100%;
margin: 0;
}
.white-space {
padding-bottom: 70px;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0;
list-style: none;
background-color: #000;
}
.container li {
display: inline-block;
width: 33.33%;
vertical-align: middle;
box-sizing: border-box;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.block {
display: block;
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
}
.img {
display: block;
width: 100%;
height: auto;
border: none;
padding: 0;
margin: 0;
}
.img-overlay {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: auto;
background: url(images/CMS-ROLL.jpg);
background-size: 100%;
opacity: 0;
transition: all 0.6s;
}
.container li:hover .img-overlay {
opacity: 1;
}
Can someone shine a light on my issue? Thank you very much in advance!
Moved from Adobe Creative Cloud to Dreamweaver support forum [Moderator]
AdChoices