【初心者へのアドバイス】私のコードのどこが間違っているのでしょうか？なぜ上と左の模様が重なっているのでしょうか？ _html/css_WEB-ITnose

#header{
高さ:50px;
幅:100%;
枠線:1px 黒一色;
ボーダー半径:5px;
背景:緑;
パディング:40ピクセル;
位置:固定;
z-インデックス:1;
マージンボトム:10px;
}
#header p{display:inline;margin-left:20px;}
.left{
height:100px; 
マージントップ: 50ピクセル;
幅:30%;
背景色:黄色;
ボーダー半径:5px;
枠線:1px 黒一色;
フロート:左;
位置:相対;
}
.right{
高さ:100px;
幅: 70%;
背景色:青;
ボーダー半径:5px;
枠線:1px 黒一色;
フロート:右;
}
#footer{
高さ:50px;
幅:100%;
枠線:1px 黒一色;
ボーダー半径:5px;
背景:#ff0000;
パディング:40ピクセル;
クリア:両方;
}

范例代码（节取）
#header {
z-index: 1;
位置: 固定。
幅: 97.5%;
マージントップ: -20px;
高さ: 60ピクセル;
背景色: #668284;
margin-bottom: 10px;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
フォントファミリー: Verdana、サンセリフ;
}

}
.left {
位置: 相対;
フロート: 左;
マージントップ: 50ピクセル;
幅: 10%;
高さ: 400ピクセル;
背景色: #B9D7D9;
margin-bottom: 10px;
}

.right {
位置: 相対;
フロート: そうです。
マージントップ: 50ピクセル;
幅: 88%;
高さ: 400ピクセル;
背景色: #F4EBC3;
margin-bottom: 10px;
}

回复讨论(解决方案)

因みに#header 中の 位置: 固定; 

因みに#header 中の 位置: 固定; 

位置が相対に変更された後は、再度繰り返されることはありません。このような内容は、position と float を使用することになる可能性があります…そして、この例では同様に「固定位置」が使用されており、同様の問題は発生しませんか?

回答: 30 % + 70% = 100%

ただし、値が制限されているため、100% を超過し、この結果になります。

回答: 30 % + 70% = 100%

ただし、边框并给この値は私が変更した後、黄ブロックと黄ブロックに同時に移行する可能性があります。

回答: 30 % + 70% = 100%

ただし、黄枠があり、値に従うため、100% を超える可能性があり、このサンプルになります。

回答: 30 % + 70% = 100%
ただし、限界があり、値が上限であるため、100% を超える可能性があり、このような結果になります。样：