Я только начал создавать сайт, и у меня есть отступ в несколько пикселей по всей левой стороне, и я не могу понять, почему.

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

Любой совет будет принята с благодарностью

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;
}

И HTML

    <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>


    

    
              
       
     
    


   Footer Text