ヘッダーが「width:100vw」なのに右に寄ってしまう。html css

前提・実現したいこと

ヘッダーを横いっぱいに広げたい

発生している問題

ヘッダーが少し右による

該当のソースコード

html
1<html><head><meta name="viewport" content="width=device-width,initial-scale=1" />
2</head><body><header>
3  <div class="header-logo-menu">
4  <div id="nav-drawer">
5      <input id="nav-input" type="checkbox" class="nav-unshown" />
6      <label id="nav-open" for="nav-input"><span></span></label>
7      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
8      <div id="nav-content">ここに中身を入れる</div>
9  </div>
10  <div class="logo-area"><h2>logo</h2></div>
11  </div>
12</header>
13
14<style>
15header {
16  padding:10px;
17  margin-left:0px;
18  background: #fff;
19border:medium solid #94de8c;
20width:100%;
21}
22
23#nav-drawer {
24  position: relative;
25}
26
27/*チェックボックス等は非表示に*/
28.nav-unshown {
29  display:none;
30}
31
32/*アイコンのスペース*/
33#nav-open {
34  display: inline-block;
35  width: 30px;
36  // height: 22px;
37height: 8vh;
38  vertical-align: middle;
39}
40
41/*ハンバーガーの形をCSSで表現*/
42#nav-open span, #nav-open span:before, #nav-open span:after {
43  position: absolute;
44
45  height: 1px;
46  width: 45px;/*長さ*/
47  border-radius: 10%;
48  background: green;
49  display: block;
50  content: '';
51  cursor: pointer;
52}
53#nav-open span:before {
54  bottom: -8px;
55}
56#nav-open span:after {
57  bottom: -16px;
58}
59
60/*閉じる用の薄黒箇所*/
61#nav-close {
62  display: none;
63  position: fixed;
64  z-index: 99;
65  top: 0;
66  left: 0;
67  width: 100%;
68  height: 100%;
69  background: black;
70  opacity: 0;
71  transition: .3s ease-in-out;
72}
73
74/*メニューの中身*/
75#nav-content {
76  overflow: auto;
77  position: fixed;
78  top: 0;
79  left: 0;
80  z-index: 9999;
81  width: 80%;
82  max-width: 90%;/*最大幅（お好みで調整を）*/
83  height: 100%;
84  background: #fff;
85  transition: .3s ease-in-out;
86  -webkit-transform: translateX(-105%);
87  transform: translateX(-105%);
88}
89
90/*チェックがついたら表示させる*/
91#nav-input:checked ~ #nav-close {
92  display: block;
93  opacity: .5;
94}
95
96#nav-input:checked ~ #nav-content {
97  -webkit-transform: translateX(0%);
98  transform: translateX(0%);
99  box-shadow: 6px 0 25px rgba(0,0,0,.15);
100}
101
102.header-logo-menu{
103 display: flex;
104 display: -moz-flex;
105 display: -o-flex;
106 display: -webkit-flex;
107 display: -ms-flex;
108 flex-direction: row;
109 -moz-flex-direction: row;
110 -o-flex-direction: row;
111 -webkit-flex-direction: row;
112 -ms-flex-direction: row;
113}
114
115
116.logo-area{text-align:center;margin:auto;}
117</style></body></html>
118

試したこと

margin:0px;をつけてみたりしました。

kei344

2020/04/03 06:31

（質問文は編集できます）質問タイトルが「with:100vw」になっています。「width」です。

退会済みユーザー

2020/04/03 06:36

直しました。ありがとうございます

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

回答2件

ベストアンサー

.header-logo-menu が flexになっているので#nav-drawerと並んでいるから少し右にずれます。

CSS
1#nav-drawer {
2    /*position: relative;*/
3    position: absolute;
4}
5
6.header-logo-menu{
7 display: flex;
8 display: -moz-flex;
9 display: -o-flex;
10 display: -webkit-flex;
11 display: -ms-flex;
12 flex-direction: row;
13 -moz-flex-direction: row;
14 -o-flex-direction: row;
15 -webkit-flex-direction: row;
16 -ms-flex-direction: row;
17    position: relative;/* ADD */
18}
19```**動くサンプル：**[https://jsfiddle.net/8sjf15za/](https://jsfiddle.net/8sjf15za/)
20
21---
22
23あと、CSSのコメントは`/*  */`これだけです。
24
25```CSS
26/*アイコンのスペース*/
27#nav-open {
28  display: inline-block;
29  width: 30px;
30  /* // height: 22px; */
31height: 8vh;
32  vertical-align: middle;
33}

追記：

width:100%;にはデフォルトでpadding幅が含まれないので、box-sizing: border-box;をつけるか、width:100%;を削除するかどちらかです。（width:100%;を削除すると親要素内に収まるように計算されるので）

CSS
1header {
2  padding:10px;
3  margin-left:0px;
4  background: #fff;
5border:medium solid #94de8c;
6width:100%;/* これはそのままではpaddingを含まない */
7box-sizing: border-box;/*こうするか、width:100%;を削除する */
8}
9```**動くサンプル：**[https://jsfiddle.net/fL28mhbs/](https://jsfiddle.net/fL28mhbs/)

投稿2020/04/03 06:46

編集2020/04/03 06:55

kei344

総合スコア69606

kei344

2020/04/03 06:56 編集

あ、読み違えてた。⇒ 修正しました。

退会済みユーザー

2020/04/03 07:22

ありがとうございます。思い通りに行きました。

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

左のハンバーガーメニューの幅を除いた、残りの部分の中で中央に表示しているためです。
あまり綺麗な方法ではありませんが、右にも左と同じ幅の空要素を置いてやればタイトルは全体の中央に表示されます。

html
1  <div class="header-logo-menu">
2  
3    <div id="nav-drawer">
4        <input id="nav-input" type="checkbox" class="nav-unshown" />
5        <label id="nav-open" for="nav-input"><span></span></label>
6        <label class="nav-unshown" id="nav-close" for="nav-input"></label>
7        <div id="nav-content">ここに中身を入れる</div>
8    </div>
9
10    <div class="logo-area"><h2>logo</h2></div>
11
12    <div id="nav-spacer" style="display:inline-block; width:30px;"></div> <!-- 調整用の空要素 -->
13
14  </div>