HTMLのはみ出たpaddingについて

Question

前提・実現したいこと

htmlとcssを学習中で、Airbnbのサイトの模写をしているのですが、Bootstrapのグリッドシステムを導入したあたりから、画面右にpaddingがはみ出るようになったので、どうやったらpaddingを消去できるかお伺いしたいです。

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

デベロッパーツールではcontainerクラスとheader-rightクラスのpaddingがはみ出ているとわかったので、paddingを両方0にしましたが、治りませんでした。

該当のソースコード

  <header>
    <div class="header-wrapper">
      <div class="row">
            <div class="header-left col-lg-6 col-md-6">
              <i class="fas fa-video fa-2x fa-fw"></i>
                <input class="search-bar" type="search" name="search" placeholder="探す">
            </div>
            <div class="header-right col-lg-6 col-md-6">
                <ul class="container">
                  <li><a href="#">ホストを始める</a></li>
                  <li><a href="#">ヘルプ</a></li>
                  <li><a href="#">登録する</a></li>
                  <li><a href="#">ログイン</a></li>
              </ul>
            </div>
      </div>
    </div>
  </header>

```css
.header-wrapper{
  background-color: #fff;
}

.header-left{
	margin: auto;
}

.search-bar{
	width:600px;
	height:50px;
}

.header-right{
	padding:0;
}

.container{
  display: inline-flex;
  justify-content: flex-end;
padding:0;
}

.container a{
  padding-right:20px;
  font-size: 14px;
  font-weight: 600;
  color:#484848;
  line-height: 80px;
	display: inline-block;
	text-decoration: none;
}

試したこと

デベロッパーツールではcontainerクラスとheader-rightクラスのpaddingがはみ出ているとわかったので、paddingを両方0にしましたが、治りませんでした。

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

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

Answer 1

header-wrapper クラスを付与している要素に対して、container-fluid クラスを付与することで、画面右端に生じる余白が解消されると思います(動作確認用リンク)。

<header>
  <div class="header-wrapper container-fluid">
    <div class="row">
      <div class="header-left col-lg-6 col-md-6"> <i class="fas fa-video fa-2x fa-fw"></i> <input class="search-bar" type="search" name="search" placeholder="探す"> </div>
      <div class="header-right col-lg-6 col-md-6">
        <ul class="container">
          <li><a href="#">ホストを始める</a></li>
          <li><a href="#">ヘルプ</a></li>
          <li><a href="#">登録する</a></li>
          <li><a href="#">ログイン</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

Comments

[herapome]

早速の回答ありがとうございます。無事に治りました。勉強しなおします！

Answer 2

paddingがはみ出ているとわかったので、paddingを両方0にしましたが、治りませんでした。

Bootstrapは「box-sizing: border-box;」が初期設定されているので、paddingは基本的にハミ出しません。

提示のコードだと両サイドにマイナスマージンがあるように見えましたので、以下ではどうでしょうか？

<div class="row ml-0 mr-0">　<!-- マイナスマージンの打ち消し -->

Comments

[yoshinavi]

あ、終わってた。
(^^;)

[herapome]

マイナスマージンの存在認識していませんでした。回答ありがとうございました。勉強になります。