ｃｓｓとｈｔｍｌでヘッダーを画面いっぱいに、コンテンツを中央よせにするコードを書きましたがメディアクエリが上手くいきません。
ｃｓｓとｈｔｍｌでヘッダーを画面いっぱいに、コンテンツを中央よせにするコードを書きましたがメディアクエリが上手くいきません。 スマホ画面になったときに右側に大幅な空白ができるのですがどのようにしたらよいでしょうか？ style.css .wrapper { max-width: 960px; margin: 0 auto; } body { width: 100%; margin: 0 auto; text-align: center; } .hidden { overflow: visible; } header { margin: 0 -500%; padding: 0.5em 500%; height: 55px; background-color : #444444; } html <head> </head> <div class="hidden"> <div class="wrapper"> <header> </header> <body> </body> <footer> </footer> </div> </div> </html>
ベストアンサー
なんかめちゃくちゃですね。。 まず、htmlの構造がおかしいです。 例に書かれている感じでhtmlを書くなら、下記のように書かなければいけません。 <html> <head></head> <body> <header> </header> <div class="hidden"> <div class="wrapper"> </div> </div> <footer> </footer> </body> </html> コンテンツの内容は<body>から</body>の中に書きます。 あと、CSSのおかしいです。 .hidden { overflow: visible; } これの意味が分かりません。 header { margin: 0 -500%; padding: 0.5em 500%; } このmarginとpaddingの-500%;、500%;なんて書き方もおかしいですし、これを書く必要性も無いですね。。
質問者からのお礼コメント
ありがとうございました
お礼日時：3/5 18:43
