【模写】body幅がcontainerの幅より狭くなってしまうので同じにしたい。

前提・実現したいこと

body(ヘッダー)の幅をcontainerと合わせたい。

発生している問題・エラーメッセージ

bodyの幅がcontainerより狭くなってしまい、ヘッダーもつられて狭くなってしまうのを直したいです。
宜しくお願いいたします！

エラーメッセージ


### 該当のソースコード

<body>
  <header>
    <div class="container">
      <div class="header-left">CITY<span> Lab</span></div>
      <div class="header-right">
        <a href="#" class="login">お問い合わせ</a>
      </div>
    </div>
  </header>
  <div class="top-wrapper">
    <div class="container">
      <h1>City</h1>
      <h1>Specialist</h1>
      <p>豊富なアイデアと実績で街の課題を解決</p>
    </div>
  </div>

-----------------------------------------------------------------
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";

.top-wrapper {
  width: 1600px;
  padding: 168px 0 200px 0;
  background-image: url("../corporate-template-assets/top.jpg");
  background-size: cover;
  color: white;
  text-align: center;
}

.container {
  padding: 0 15px;
  margin: 0 auto;
}

header {
    height: 80px;
    width: 100%;
    background-color: white;
}


### 試したこと

①　bodyの幅を指定する
②　cssリセット

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2020/08/28 04:32

とりあえず、問題が再現可能なコードをください。ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7

_konatsu_

2020/08/28 04:37

ありがとうございます。下記で宜しいでしょうか？ <body> <header> <div class="container"> <div class="header-left">CITY<span> Lab</span></div> <div class="header-right"> <a href="#" class="login">お問い合わせ</a> </div> </div> </header> <div class="top-wrapper"> <div class="container"> <h1>City</h1> <h1>Specialist</h1> <p>豊富なアイデアと実績で街の課題を解決</p> </div> </div>

Lhankor_Mhy

2020/08/28 05:10

質問は編集可能です。

行動規範の内容に同意します

回答2件

こちらでいかがでしょうか。

css
1html {
2	width: max-content;
3}

投稿2020/08/28 06:07

Lhankor_Mhy

総合スコア36960

_konatsu_

2020/08/28 08:18 編集

ありがとうございます！直りました！原因は何なのでしょうか？今までの練習だとこのcssは書いていないので。

Lhankor_Mhy

2020/08/28 08:31

htmlのwidthはautoだとビューポートと同じになるので、子要素がその幅より大きい幅になるとはみ出します。なので、autoではなく、指定してやればいい、ということになります。

行動規範の内容に同意します

ベストアンサー

引用テキストbodyの幅がcontainerより狭くなってしまい、ヘッダーもつられて狭くなってしまうのを直したい

まず、bodyの弓括弧が閉じていない

そしてheaderが狭くなっているのではないcontainerの親要素top-wrapperがデカすぎるのだ、top-wrapperのwidthを100％にしたらいいんじゃないでしょうか？

CSS
1body {
2margin: 0;
3font-family: "Hiragino Kaku Gothic ProN";
4}//←ここ
5.top-wrapper {
6width: 100%;//←ここ
7padding: 168px 0 200px 0;
8background-image: url("../corporate-template-assets/top.jpg");
9background-size: cover;
10color: white;
11text-align: center;
12}