次のCSSが役立ちます。あなたは問題を引き起こしているいくつかのことをしています。最も重要なのは、あなたの#ラッパー宣言が矛盾していることです。あなたはあなたの最大幅よりも大きい最小幅を宣言しました。最小幅は最大幅より小さくなければなりません。
私は、小さな画面サイズのメディアクエリでヘッダーフォントサイズを小さくして、ナビフィットに合わせるなど、いくつかの小さな調整を加えました。それ以外の場合は、青いコンテナの下を囲みます。
*{
padding:0;
margin:0;
}
/* Header */
#header {
transform: translateZ(10px);
background-repeat: no-repeat;
background-color:#3cb5f9;
width: 100%;
height: 80px;
top:200;
left: 0;
z-index: 999;
box-sizing:border-box;
border-bottom:1px solid white;
}
#header nav {
display: inline-block;
float:right;
line-height:80px;
}
#header nav a {
margin-left: 25px;
color: #fafafa;
font-weight: 700;
font-size: 18px;
text-decoration:none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#header nav a:hover {
color: black;
}
#header img {
line-height:80px;
margin-top:14px;
display:block;
float:left;
height:51px;
}
.clearfix{
display: block;
width:70%;
clear:both;
margin: 0 auto;
}
/*Mobile part*/
@media screen and (max-width: 480px) {
#header {
width: 100vw;
float:none;
}
p{
font-size: 0.5em;
}
::-webkit-scrollbar{
display:none;
}
#header nav{
float:right;
}
#header nav {
display: inline-block;
float:center;
line-height:80px;
}
#header nav a {
font-size: 12px;
margin-left: 10px;
}
#header nav a:hover {
color: black;
}
#header .clearfix {
width: 95%;
}
}
/* Other */
#main{
width: 100%;
color:#3cb5f9;
margin: 0 auto;
}
.container{
width:70%;
margin: 0 auto;
}
#wrapper {
max-width:1240px;
height:2000px;
color:#3cb5f9;
margin: 0 auto;
}
.home{
width:100vw;
height:600px;
clear:both;
}
ありがとうございます。ラッパーの 'max-width'がなぜ1240pxにすべきなのか分かりません。デフォルトは何ですか? – pHenomen
レイアウトのデフォルトの幅を自由に設定できます。デフォルトはありません。何がベストか、固定幅を設定するかどうかについては、オンラインで多くの議論があります。あなたがそれについてのより詳しい情報を知りたいのであれば、 'fluid web layout'と同じようなものを探してみてください。 – hightempo
大いに感謝する :) – pHenomen