Shuma Shuma - 4 months ago 8
HTML Question

Unwanted margin/gap left hand side of entire webpage

Just started making a site and I have margin of a few pixels down the entire left hand side and I cannot figure out why.

http://jsbin.com/elufob/1/

Any advice would be greatly appreciated

CSS

html{
min-width: 100%;
background-color: #add8e6;
}

.navBar{
text-align: center;
background-image: linear-gradient(to bottom, #666666 0%, #000000 60%);
color: white;
border-bottom:solid 1px #666;
top:0;
height:30px;
position:fixed;
width:100%;
z-index:1000;
}

.leftDiv{
clear: left;
text-align: left;
background-color: blue;
float: left;
max-width: 26%;
display: inline-block;
margin-right:2%;
margin-left: 0%;
margin-top: 2%;
border: black;
border-width: 5px;
border-style: double;
border-radius: 5px;
}

.middleDiv{
text-align: center;
background-color: green;
max-width: 70%;
float: right;
display: inline-block;
margin-top: 2%;
MARGIN-BOTTOM: 1%;
border-style: solid;
border: black;
border-width: 5px;
border-style: double;
border-radius: 5px;
}

.pageContainer{
width: 100%;
min-height: 100%;
min-width: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}

.footer{
background-image: linear-gradient(to bottom, #666666 0%, #000000 60%);
color: white;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}


And the HTML

<html>
<link rel="stylesheet" href="psWebCss">

<header class=navBar>
<a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
<a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
<a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>
<a href="http://www.google.com"><img src="http://library.thinkquest.org/10127/media/examples/Button.gif"></a>


</header>
<body>
<div class="pageContainer">
<div class="leftDiv">
</div>
<div class="middleDiv">
</div>
</div>
<div class="footer">
Footer Text
</div>
</body>





</html>

Answer

You body tag have margin: 8px; just add in your css

body {
    margin: 0;
}