ブラウザ縮小すると背景色の右側に余白ができてしまう

背景色につきまして、ブラウザ最大で見ると画面いっぱいになってるのですが、
ブラウザを縮小すると右側に余白ができてしまいます。

background-size: cover;やwidth100%などいろいろ調べてやってみたのですが結果は変わらず。どうしたら縮小しても画面いっぱいのままになりますでしょうか？
ご教授いただけませんでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <link rel="stylesheet" href="../../tools/style/reset.css" />
8    <link rel="stylesheet" href="./assets/stylesheets/style.css" />
9    <link rel="icon" type="image/png.favicon" href="./assets/images/favicon.ico">
10    <title>WOOF オンラインストア</title>
11  </head>
12  <body>
13    <div class="l-wrapper">
14      <section class="p-section">
15        <div class="p-login">
16          <ul class="p-login__menu">
17            <li class="p-login__list">
18              <a href="" class="p-login__button">ログイン</a>
19            </li>
20            <li class="p-login__list">
21              <a href="" class="p-login__button">新規会員登録</a>
22            </li>
23            <li class="p-login__list">
24              <a href="" class="p-login__button">WOOF CORE CARDについて</a>
25            </li>
26          </ul>
27        </div>
28        <header class="l-header">
29          <div class="l-header__container">
30            <a href=""><img class="l-header__logo" src="./assets/images/icon1.png" alt="会社ロゴ" ></a>
31            <nav class="p-nav">
32              <ul class="p-nav__menu">
33                <li class="p-nav__list">
34                  <a href="" class="p-nav__button">MENS</a>
35                </li>
36                <li class="p-nav__list">
37                  <a href="" class="p-nav__button">WOMENS</a>
38                </li>
39                <li class="p-nav__list">
40                  <a href="" class="p-nav__button">SHOP LIST</a>
41                </li>
42              </ul>
43            </nav>
44            <div class="p-keyword">
45              <input class="p-keyword__search" type="search"  placeholder="何かお探しですか">
46              <ul class="p-keyword__container">
47                <li class="p-keyword__list">
48                  <a href=""><img class="p-keyword__glasses" src="./assets/images/icon2.png" alt="虫眼鏡"></a>
49                </li>
50                <li class="p-keyword__list">
51                  <a href=""><img class="p-keyword__cart" src="./assets/images/icon3.png" alt="虫眼鏡"></a>
52                </li>
53              </ul>
54            </div>
55          </div>
56        </header>
57      </section>
58        <div class="p-hero">
59        </div>
60        <main class="l-main"></main>
61      </section>
62    </div>
63  </body>
64</html>

css
1@charset "UTF-8";
2.l-header__container {
3  display: flex;
4  align-items: center;
5  justify-content: space-between;
6}
7/* @media screen and (max-width: 768px) { */
8  /* SP style */
9/* } */
10
11/* @media screen and (min-width: 769px) { */
12  /* PC style */
13  .l-wrapper {
14    white-space: nowrap;
15  }
16
17  .p-login {
18    width: 900px;
19    margin: 0 auto;
20    padding-top: 3px;
21  }
22
23  .p-login__menu {
24    display: flex;
25    justify-content: flex-end;
26  }
27
28  .p-login__list:not(:last-child) {
29    margin-right: 20px;
30  }
31
32  .p-login__button {
33    color: #000;
34    text-decoration: none;
35    font-size: 12px;
36  }
37
38  .l-header {
39    width: 900px;
40    margin: 0 auto;
41  }
42
43  .l-header__logo {
44    width: 160px;
45    margin-right: 120px;
46  }
47
48  .p-nav__button {
49    color: #000;
50    text-decoration: none;
51  }
52
53  .p-nav__menu {
54    display: flex;
55  }
56
57  .p-nav__list {
58    margin-right: 60px;
59  }
60
61  .p-keyword__search {
62    border-right:none;
63    border-left:none;
64    border-top:none;
65    border-width:1px;
66  }
67
68  .p-keyword__glasses {
69    width: 20px;
70  }
71
72  .p-keyword__cart {
73    width: 20px;
74  }
75
76  .p-keyword {
77    display: flex;
78  }
79
80  .p-keyword__list:first-child:after {
81    content: "";
82    border-right:1px solid #000;
83    padding-right: 10px;
84  }
85
86  .p-keyword__list:last-child {
87    margin-left: 10px;
88  }
89
90  .p-keyword__container {
91    display: flex;
92  }
93
94  .p-hero {
95    background-color: #000;
96    height: 500px;
97  }
98/* } */

recal

2022/05/01 03:42

htmlのエラーを修正していただけますか section周りとinputに2つのtypeが設定されている部分(一つはclass？)

maring

2022/05/01 09:48

ご指摘ありがとうございます　修正したのでご確認お願いします

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

回答1件

ベストアンサー

.p-loginとl-headerでwidth: 900px;が指定されているからです。

css
1  .p-hero {
2    background-color: #000;
3    height: 500px;
4    min-width: 900px;
5  }

にすると端まで表示できました

追記

投稿2022/05/01 06:46

編集2022/05/01 10:32

ib-k

総合スコア111

maring

2022/05/01 10:11

ご教授いただきありがとうございます　解決できました。可能であれば、何故　.p-loginとl-headerのwidth: 900px;がp-hero へ影響を与えているか教えていただくことはできないでしょうか？　自分の考えではp-heroのwidthはいじってないのでまったく関与しないと思っていたのですが。

ib-k

2022/05/01 10:26

拡大すると画面サイズが700pxとかになります。それで暗黙的に.p-hero:auto;で.p-heroは700pxなど、画面サイズにあったものになります。しかし、.p-loginや.l-headerは固定で900pxなので端にあふれた状態になります。それ故にあふれた200px分が白になっています。開発者ツールで確認するとそれがわかります。 .p-heroと.l-headerはあふれた分marginがマイナスになっています。写真は回答に追記しておきます。

maring

2022/05/01 11:51

開発者ツールで見直し自分でも確認いたします。画像までつけてくださりありがとうございました　しっかり自分の中に落とし込みたいと思います。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する