画面の右端にある空白をなくしたい

画面横ある白い空白をなくす方法を教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta name="description" content="課題①-1">
8  <title>課題①-1</title>
9  <link rel="stylesheet" href="css/sanitize.css">
10  <link rel="stylesheet" href="css/style.css">
11  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
12</head>
13<body>
14  <header>
15    <div class="menu-bar">
16      <img  id="header-logo" src="img/yEVqXX.png" alt="イチヨンヨンラボ">
17        <nav>
18            <ul id="menu">
19              <li>
20                <a class="menu-item1" href="#">ABOUT</a>
21              </li>
22              <li>
23                <a class="menu-item2" href="#">NEWS</a>
24              </li>
25              <li>
26                <a class="menu-item3" href="#"> SERVICE&amp;PRODUCT</a>
27              </li>
28              <li>
29                <a class="menu-item4" href="#">CONTACT</a> 
30              </li>
31            </ul>
32        </nav>
33      </div> 
34      <div class="test"></div>
35  </header>

CSS
1/* header */
2
3header {
4  background-color: #F2F3F7;
5  top: -176px;
6  left: 150px;
7  width: 100%;
8  height: 970px;
9}
10
11#header-logo {
12  top: 80px;
13  left: 187px;
14  width: 168px;
15  height: 60px;
16  padding-top: 21px;
17  display: block;
18}
19
20.test {
21  position: relative;
22  top: -176px;
23  left: 150px;
24  width: 100%;
25  height: 999px;
26  background: transparent url("img/メインビジュアル.png");
27  background-position: center;
28  z-index: 1;
29  max-width: 100%;
30}
31
32.menu-bar {
33  top: 59px;
34  width: 975px;
35  height: 77px;
36  box-shadow: 4px 4px 1px #00000029;
37  background-color: #FFFFFF;
38  display: flex;
39  justify-content: space-around;
40  z-index: 2;
41  position: absolute;
42  margin: 0 auto;
43  right: 0;
44  left: 0;
45}
46
47#menu {
48  list-style:none;
49  display:flex;
50  }
51
52#menu li{
53  text-align: center;
54  display: flex;
55  padding-right: 40px;
56  padding-left: 40px;
57  letter-spacing: 0px;
58  position: relative;
59  }
60
61#menu a {
62  text-decoration: none;
63  color: #000000;
64}
65
66#menu li:not(:first-child)::before{
67  content: "|";
68  position: absolute;
69  top: 10px;
70  left: 0px;
71}
72  
73  #menu .menu-item1::after {
74    display:block;
75    font-size:0.7em;
76    color: #777777;
77    text-align: center;
78    content: "企業情報";
79  }
80
81  #menu .menu-item2::after {
82    display:block;
83    font-size:0.7em;
84    color: #777777;
85    text-align: center;
86    content: "ニュース";
87  }
88
89  #menu .menu-item3::after {
90    display:block;
91    font-size:0.7em;
92    color: #777777;
93    text-align: center;
94    content: "サービス＆製品情報";
95  }
96
97  #menu .menu-item4::after {
98    display:block;
99    font-size:0.7em;
100    color: #777777;
101    text-align: center;
102    content: "お問い合わせ";
103  }

Lhankor_Mhy

2021/03/12 05:13

なんとなくですが、ご提示いただいていない部分に原因があるんじゃないかな、と感じています。

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

回答2件

ベストアンサー

場当たり的だけども、下のように変えると直るかと思います。
子要素が親要素を画面右方向へ突き抜けているだけなので。

css
1.test {
2  position: relative;
3  top: -176px;
4  left: 150px;
5  //width: 100%;
6  width: calc(100% - 150px);

投稿2021/03/12 05:19

退会済みユーザー

総合スコア0

momo429

2021/03/12 06:20

ありがとうございます。解決できました！

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

「.menu-bar」の「justify-content」を
space-aroundからspace-betweenに変更してください

投稿2021/03/12 05:14

yambejp

総合スコア114829

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

画面の右端にある空白をなくしたい

関連した質問