【新手请问】请教小弟我的代码出了什么有关问题？为什么上部和左侧图案会重叠在一起

【新手请教】请问我的代码出了什么问题？为什么上部和左侧图案会重叠在一起？
#header{
height:50px;
width:100%;
border:1px solid black;
border-radius:5px;
background:green;
padding:40px;
position:fixed;
z-index:1;
margin-bottom:10px;
}
#header p{display:inline;margin-left:20px;}
.left{
height:100px; 
margin-top: 50px;
width:30%;
background-color:yellow;
border-radius:5px;
border:1px solid black;
float:left;
position:relative;
}
.right{
height:100px;
width:70%;
background-color:blue;
border-radius:5px;
border:1px solid black;
float:right;
}
#footer{
height:50px;
width:100%;
border:1px solid black;
border-radius:5px;
background:#ff0000;
padding:40px;
clear:both;
}

范例代码（节取）
#header {
z-index: 1;
position: fixed;
width: 97.5%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
}

}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 10%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}

.right {
position: relative;
float: right;
margin-top: 50px;
width: 88%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}

------解决思路----------------------
因为#header 中的  position: fixed; 

------解决思路----------------------
答： 30 %  + 70% = 100% 
但是你有边框并给了值，因此会超出100%，就变成这个样子了。