摆脱填充？

Question

如何摆脱所有这些空白区域，以便一切都会相互接触？ 我正在为朋友免费为朋友建一个网站。所以是的，我知道它看起来像新手。这就是一切：

http://jsfiddle.net/e2p3pwtb/embedded/result/

h1{
    background-image: url(silver-955496_960_720.jpg);
    padding-bottom: 0;
}

#mainnav{ background-image: url(silver-313347_960_720.jpg);}

body {
    margin: 0;
    text-align: center;
}



.sidebar1{
    float:left;
    width: 20%;
    padding: 0 20px 0 10px;
    background-image: url(silver-955496_960_720.jpg);
    background-repeat: repeat-y;
    height:650px;}

.main{
   float: left;
    width: 60%;
    padding: 0 20px 0 20px;
    background-image: url(silver-313347_960_720.jpg);}




.sidebar2{
    float: right;
    width: 20%;
    padding: 0 10px 0 20px;
     background-image: url(silver-955496_960_720.jpg);
    background-repeat: repeat-y;
    height:650px;}


/*This will keep you from having "float drops"*/
*{box-sizing: border-box;}

Answer 1

默认情况下，某些元素具有边距。在你的小提琴中，添加

h1, p, ul {margin:0}

http://jsfiddle.net/MrLister/e2p3pwtb/1/

或者，更彻底，

* {margin:0}

但我真的不能推荐。这样的事情会使其外观从自然状态变得太过分了。