質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.09%

画面幅を横幅いっぱいにしたい。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 426

to-to-

score 18

イメージ説明
イメージ説明

前提・実現したいこと

画面幅いっぱいに広がって欲しいのでbodyに対して box-sizing: border-box; width: 100% を指定したのですが広がってくれません。どうしたら良いでしょうか?
どこが問題なのかわからないので、とりあえずすべてのhtmlとcssのコードを載せときます。

該当のソースコード

<body>
  <header>
    <img src="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico" class="icon">
    <input type="search" name="" value="" class="search">
    <input type="submit" name="検索" value="検索">
    <div class="header-bg">
      <div class="header-title">
        <h1>旅を贈ろう。</h1>
        <p>Airbnbギフトカードで、世界をぐんと身近に</p>
        <a href="#">ギフトカードを登録</a>
      </div>
    </div>
  </header>
  <section>
    <div class="section-title">
      <h1>いつも完璧な贈りもの</h1>
    </div>
    <div class="container">
      <div class="row row1">
        <div class="col-12  col-md-4">
          <i class="far fa-envelope fa-3x icon-color"></i>
          <h2>簡単に使える</h2>
          <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
        </div>
        <div class="col-12 col-md-4">
          <i class="fas fa-stopwatch fa-3x icon-color"></i>
          <h2>有効期限なし</h2>
          <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
        </div>
        <div class="col-12 col-md-4">
          <i class="fas fa-globe fa-3x icon-color"></i>
          <h2>忘れられない旅</h2>
          <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
        </div>
      </div>
    </div>
  </section>
  <section class="call-to-action">
    <img src="img/Present Icon.png " alt="プレゼントアイコン">
    <h1 class="width1032">ギフトカードをもらったら...</h1>
    <p class="width1032">ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p>
    <a href="#" class="btn1">ギフトカードを登録する</a>
    <a href="#" class="btn2">Airbnbギフトカードの仕組みは?</a>
  </section>
  <footer>
    <div class="container container2">
      <div class="row row2">
        <div class="col-sm-3">
          <p>Airbnb</p>
          <ul>
            <li><a href="#">採用情報</a></li>
            <li><a href="#">プレス</a></li>
            <li><a href="#">ポリシー</a></li>
            <li><a href="#">ヘルプ</a></li>
            <li><a href="#">ダイバーシティ&ビロンギング</a></li>
            <li><a href="#">アクセシビリティ対応</a> <span>新着</span></li>
            <li><a href="#">企業情報</a></li>
          </ul>
        </div>
        <div class="col-sm-3">
          <p>スタッフのおすすめ</p>
          <ul>
            <li><a href="#">信頼&安全</a></li>
            <li><a href="#">お友達紹介クーポン</a></li>
            <li><a href="#">Airbnb Citizen</a></li>
            <li><a href="#">出張</a></li>
            <li><a href="#">ガイドブック</a></li>
            <li><a href="#">Airbnbmag</a></li>
          </ul>
        </div>
        <div class="col-sm-3">
          <p>ホスティング</p>
          <ul>
            <li><a href="#">ホストになる理由</a></li>
            <li><a href="#">おもてなしの心</a></li>
            <li><a href="#">ホストの責任</a></li>
            <li><a href="#">コミュニティセンター</a></li>
            <li><a href="#">体験を掲載</a> <span>新着</span></li>
            <li><a href="#">オープンホーム</a></li>
          </ul>
        </div>
        <div class="col-sm-3">
          <a href="#" class="sns"><i class="fab fa-facebook-f icon-size color-gray"></i></a>
          <a href="#" class="sns"><i class="fab fa-twitter icon-size color-gray"></i></a>
          <a href="#" class="sns"><i class="fab fa-instagram icon-size color-gray"></i></a>
          <ul>
            <li><a href="#">利用規約</a></li>
            <li><a href="#">プライバシー</a></li>
            <li><a href="#">サイトマップ</a></li>
          </ul>
        </div>
      </div>
      <hr>
      <div class="row row3">
        <div class="col-9 footer-message">
          <div class="footer-leftside">
            <div class="img">
              <img src="img/footer-icon.png" width="21px" height="25px">
            </div>
            <div class="footer-info">
              <a href="#"><div>Airbnb Global Services Limited</div>
              <div>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</div></a>
            </div>
          </div>
          <div class="copy-right">
            <p>&copy; 2019 Airbnb, Inc. All rights reserved.</p>
          </div>
        </div>
        <div class="col-3 option">
          <a href="#">日本語</a>
          <a href="#">JPY-¥</a>
        </div>
      </div>
    </div>
  </footer>
 </body>
body{
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}

/* header */

header .icon{
  margin: 25px;
  display: inline;
}

.header-bg{
  background-image: url(../img/BackgroundHomeSummer.jpg);
  background-size: cover;
  width: 100%
}

.header-title{
  width: 1032px;
  margin: auto;
  padding: 200px 0 215px;
}

.header-title h1, .header-title p{
  color: white;
}

.header-title h1{
  margin-bottom: 25px;
  font-weight: bold;
}

.header-title p{
  margin-bottom: 40px;
}

.header-title a{
  background-color: white;
  color: #000;
  padding: 15px 25px;
  border-radius: 5px;
  font-weight: 500;
}

.header-title a:hover{
  text-decoration: none;
}

/* section */
.section-title h1{
  font-size: 30px;
  width: 350px;
  margin: 60px auto;
  font-weight: bold;
}

.row h2{
  font-size: 16px;
  font-weight: bold;
  margin: 30px auto;
}

.row1 p{
  color: gray;
}

.section-title{
  margin-top: 45px;
}
section i{
  display: block;
}

section .icon-color{
  color: #007a87;
}

section .row{
  text-align: center;
}

.container {
  margin-bottom: 30px
}

/* section(call-to-action) */

section.call-to-action{
  background-color: #007a87;
  text-align: center;
  color: white;
  padding: 40px 0;
}

.call-to-action h1{
  font-size: 32px;
  margin: 20px auto;
  font-weight: bold;
}

.call-to-action{
  font-size: 20px;
}

.width1032{

  margin: 0 auto;
}

.call-to-action .btn1{
  background-color: #ff5a5f;
  border-radius: 5px;
  padding: 10px 30px;
  margin: 45px auto 20px;
  color: white;
  font-size: 16px;
  display: block;
  width: 250px;
}

.call-to-action .btn1:hover{
  text-decoration: none;
  background-color: #fa8072
}

.call-to-action .btn2{
  color: white;
  font-size: 14px;
  opacity: 0.5;
}

.call-to-action .btn2:hover{
  text-decoration: none;
  opacity: 1;
}

/* footer */

.row2{
  font-weight: 800;
}

footer p{
  padding-left: 40px;
}
footer ul{
  list-style-type: none;
}

footer li{
  line-height: 22px;
}
footer a{
  font-size: 14px;
  vertical-align: bottom;
  color: #767676;
}

footer a:hover{
  color: #767676;
  text-decoration: underline;
}

footer .container2{
  padding-top: 40px
}

.row2 li span{
  background-color: #007a87;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  padding: 2px;
  font-weight: lighter;
}

.row2 .sns{
  display: inline-block;
  margin-bottom: 16px;
}

.row2 .sns:not(:first-child){
  padding: 7px 7px 0
}

.row2 .sns:first-child{
  padding: 7px 7px 0 40px;
}

.color-gray{
  color: gray;
}

.icon-size{
  font-size: 1.4em;
}

/* row3 */

.row3 .img{
  display: inline-block;
  margin-top: 10px;
  float: left;
}

.row3 .footer-leftside{
  display: inline;
  float: left;
}

.row3 .footer-leftside .footer-info{
  margin-left: 35px
}

.copy-right{
  display: inline-block;
  font-size: 14px;

}
/* .row3 .copy-right{
  float: right;
} */
.row3 p{
  color: gray;
  padding: 0;
}

.row3 .option{
  text-align: right;
}

.row3 .option a{
  border: solid 0.1px;
  border-color: rgb(242, 242, 242);
  padding: 5px 10px;
  margin: 5px;
  /* border-radius: 5px; */
}

.row3 .option a:hover{
  text-decoration: none;
  background-color: rgb(242, 242, 242);
}

.footer-message {
   display: inline-block;
 }

/* mediaquary */

@media screen and (max-width: 767px) {
  .row2{
    display: none;
  }
  .container2 hr{
    display: none;
  }
}

補足情報(FW/ツールのバージョンなど)

初心者、独学なので汚いコードだと思われますが、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/06/24 13:56

    んー再現しないですね。
    画像×状態で提示コードそのままだと「ギフトカードをもらったら...」がある緑の帯部分はちゃんと100%に広がっています。
    ※細かい指摘なのでこちらに書きますが&のようなHTML特殊文字は&amp;のように(文字実体参照)したほうが良いです。

    キャンセル

  • yoshinavi

    2019/06/24 16:40

    Chromeのデベロッパーツール等で、モバイル画面時に、横いっぱいに広がっている「要素」を探してみると良いかと思います。

    キャンセル

  • to-to-

    2019/06/26 13:55

    返信遅くなってすみません。いただいたアドバイスを参考にさせていただきました。

    キャンセル

回答 1

checkベストアンサー

+4

.header-title{
  /*width: 1032px; *//* これがあるからその幅分押し広がっているのでは? */
  max-width: 1032px; /* これとかどうなりますか? */
  margin: auto;
  padding: 200px 0 215px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/26 13:57

    返信遅くなってすみません。ここにwidthが指定されていたことに気づきませんでした。おかげさまで問題が解決いたしましたので、ベストアンサーに選ばさせていただきます!
    ありがとうございました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる