headerを左右それぞれに分けたい

前提・実現したいこと

表題の通り、headerを左右それぞれに分けたいにしたいです。コードにイメージも湧かない状態で、手を動かしていましたがわからないので質問します

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

右端にボタンを追記したいですが、左端グループに寄ってしまう

試したこと

1header-left.header-rightで分けて、startやflex-endで分けようとしましたが、画像のように、左端によってしまします。
2.それぞれをmarginなどでpositionを設定しましたが、、変更できない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
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    <title>石井花壇|温海温泉旅館【公式サイト】</title>
8    <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。">
9    <link rel="stylesheet" href="./css/destyle.css">
10    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
11    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
12    <!--flatpicker-->
13    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
15    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
16  
17    <link rel="stylesheet" href="./css/style.css">
18    
19</head>
20<body>
21    <header class="header">
22        <div class="header-left">
23            <img src="./img/top-header-logo.png" alt="" id="logo">
24            <nav class="nav">
25                <ul class="header-list">
26                    <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
27                    <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
28                    <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
29                </ul><!-- /.header-list -->
30                <li class="header-link" id="js-modal">
31                    <a class="calender-link" href="#">
32                        <img src="./img/calender.png" alt="カレンダー">
33                        <p>宿泊予約</p>
34                    </a>
35                </li><!-- /.header-link -->
36            </nav><!-- /.nav -->
37
38            <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
39                <span class="line"></span ><span class="line"></span><span class="line"></span>
40            </button>
41     
42        <!-- <div class="header-right"> -->
43         
44        <!-- </div>/.header-right -->
45
46        <form action="" class="form" id="js-form">
47            <div class="form-inner">
48                 <figure class="form_img" id="js-close-calender">
49                     <!-- <img src="./img/close@2x.png" alt="✖ボタン"> -->
50                 </figure><!-- /#js-close-calender -->
51                 <h2 class="form-ttl">宿泊予約</h2><!-- /.form-ttl --> 
52
53                 <ul class="form-list">
54                     <!--1-->
55                     <li class="form-item">
56                         <label for="name">お名前</label>
57                         <input type="text" name="name" class="form_txt" placeholder="例.石井花壇">
58                        </li><!-- /.form-item -->
59                        <!--2-->
60                     <li class="form-item">
61                         <label for="mail">メールアドレス</label>
62                         <input type="text" name="name" class="form_txt" placeholder="例.example@example.com">
63                     </li>
64                        <!--3-->
65                     <li class="form-item">
66                       <p class="form-plan">ご希望プラン(空いているプランのみ表示されます)</p><!-- /.form-plan -->
67                        <select class="select-plan" name="宿泊プラン">
68                            <optgroup>
69                                <option class="form_opption" value="hidden selected">プランを選択してください</option>
70                                <option class="form_opption" value="1">➀【期間限定】海辺の四季旬彩、贅沢美味懐石プラン</option><!-- /.form_opption -->
71                                <option class="form_opption" value="2">➁平日に優雅に楽しむ、特別宿泊プラン</option><!-- /.form_opption -->
72                                <option class="form_opption" value="3">➂絶景貸切露天と個室会席を楽しむファミリープラン</option><!-- /.form_opption -->
73                            </optgroup>
74                        </select><!-- /# -->
75                    </li><!-- /.form-item -->
76                    <!--4-->
77                     <li class="form-item">
78                         <label for="js-flatpickr">日時選択</label></li><!-- /.form-item -->
79                        <input id="js-flatpickr" type="text" name="name" placeholder="日時を選択してください">
80                        </li>
81                 </ul><!-- /.form-list -->
82            </div><!-- /.form-inner -->
83        </form><!-- /.form -->
84
85    </div><!-- /.header-flex -->
86    </header><!-- /.header -->
87</body>
88</html>

CSS
1html {
2  font-size: 62.5%;
3}
4
5body {
6  font-size: 1.6rem;
7  color: #000000;
8}
9
10img {
11  width: 100%;
12  height: auto;
13  vertical-align: bottom;
14}
15
16a {
17  text-decoration: none;
18}
19
20li {
21  list-style: none;
22}
23
24.inner {
25  max-width: 1180px;
26  margin: 0 auto;
27}
28
29.wrapper {
30  width: 100%;
31  margin: 0 auto;
32}
33
34.sec-theme {
35  margin: 0 auto;
36}
37
38.sec-theme > img {
39  display: block;
40  width: 3.3%;
41  height: 5.1%;
42  margin: 0 auto;
43  padding-top: 60px;
44  padding-bottom: 20px;
45}
46
47.sec-theme .cmn-ttl {
48  display: block;
49  font-size: 3.6rem;
50  color: #000000;
51  text-align: center;
52  margin: 0 auto;
53}
54
55.cmn-link {
56  background-color: #ffffff;
57  width: 40%;
58  height: calc(54px/545px*100%);
59  border: 1px solid #707070;
60  font-size: 1.6rem;
61  text-align: center;
62}
63
64@media screen and (max-width: 992px) {
65  .cmn-link {
66    margin: 0 auto;
67  }
68}
69
70.header {
71  position: fixed;
72  top: 0;
73  z-index: 999;
74  width: 100%;
75  max-height: 80px;
76  color: transparent;
77}
78
79.header-left {
80  display: -webkit-box;
81  display: -webkit-flex;
82  display: -ms-flexbox;
83  display: flex;
84  -webkit-box-pack: left;
85  -webkit-justify-content: left;
86      -ms-flex-pack: left;
87          justify-content: left;
88  -webkit-box-align: center;
89  -webkit-align-items: center;
90      -ms-flex-align: center;
91          align-items: center;
92}
93
94.header-left #logo {
95  width: calc(400/1920*100%);
96  height: calc(40/80*100%);
97  padding: 20px 120px 20px 20px;
98  z-index: 9999;
99}
100
101.header-left .nav {
102  display: -webkit-box;
103  display: -webkit-flex;
104  display: -ms-flexbox;
105  display: flex;
106  -webkit-box-pack: justify;
107  -webkit-justify-content: space-between;
108      -ms-flex-pack: justify;
109          justify-content: space-between;
110  -webkit-box-align: center;
111  -webkit-align-items: center;
112      -ms-flex-align: center;
113          align-items: center;
114}
115
116.header-left .nav .header-list {
117  display: -webkit-box;
118  display: -webkit-flex;
119  display: -ms-flexbox;
120  display: flex;
121  -webkit-box-align: center;
122  -webkit-align-items: center;
123      -ms-flex-align: center;
124          align-items: center;
125  padding-top: 32px;
126  padding-bottom: 32px;
127}
128
129.header-left .nav .header-list .header-item {
130  color: #fff;
131}
132
133.header-left .nav .header-list .header-item + .header-item {
134  padding-left: 30px;
135}
136
137.header .header-right {
138  margin-left: auto;
139}
140
141.header .header-right .header-link {
142  width: 100%;
143  height: calc(54/80*100%);
144  background-color: #978F10;
145  border-radius: 3px;
146  padding: 15px 35px;
147  display: -webkit-box;
148  display: -webkit-flex;
149  display: -ms-flexbox;
150  display: flex;
151  -webkit-box-pack: end;
152  -webkit-justify-content: flex-end;
153      -ms-flex-pack: end;
154          justify-content: flex-end;
155  -webkit-box-align: center;
156  -webkit-align-items: center;
157      -ms-flex-align: center;
158          align-items: center;
159}
160
161@media screen and (max-width: 769px) {
162  .header .header-right .header-link {
163    margin-left: auto;
164  }
165}
166
167.header .header-right .header-link > a {
168  display: -webkit-box;
169  display: -webkit-flex;
170  display: -ms-flexbox;
171  display: flex;
172  -webkit-box-align: center;
173  -webkit-align-items: center;
174      -ms-flex-align: center;
175          align-items: center;
176}
177
178.header .header-right .header-link > a > img {
179  width: 22px;
180  height: 22px;
181}
182
183.header .header-right .header-link > a p {
184  color: #fff;
185  text-align: center;
186}
187
188.form {
189  display: none;
190}
191
192@media screen and (max-width: 769px) {
193  .form {
194    display: block;
195    width: calc(550px/1920px*100%);
196    height: calc(600px/1080px*100%);
197    background-color: #fff;
198    position: absolute;
199    top: 50%;
200    left: 50%;
201    margin-top: 50vh;
202    border: 1px solid #707070;
203    -webkit-transform: translate(-50%, -50%);
204            transform: translate(-50%, -50%);
205    z-index: 100;
206  }
207}
208
209@media screen and (max-width: 769px) {
210  .form_img {
211    width: 18px;
212    height: 18px;
213  }
214}

###補足
まず、header-left,rightはじょきに記載していません。rightなどを使ったHTMLコードのイメージがつかなかったからです。
HTMLは便宜修正可能です。

何卒よろしくお願いいたします。

itagagaki

2021/09/28 03:03

質問がよくわからないのですが… > header-left.header-rightで分けて、startやflex-endで分けようとしましたが header-rightというクラスは使われていないようですが？ .header-leftと.header-rightをFlexboxで配置したいならその親要素である.headerに display: flex; を設定する必要があると思いますが、違うのでしょうか？

Lhankor_Mhy

2021/09/28 03:34 編集

とりあえず、li の親要素は ul などにしないとHTML文法違反です。文法違反のままで行くのか、それとも何かの間違いで正しいHTMLがあるのか、はたまたHTMLは適宜変更してもいいのか、そのあたりの解決の条件を教えてください。

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

回答1件

flexで横並びになっている特定の要素を右寄せにしたいなら、マージンを使うのが一般的です。

ボタン(humburger)を右寄せしたいのなら、

css
1button.humburger {
2  margin-left: auto;
3}

あと、ベンダープレフィックスの設定が間違っています。
例えば、header-left の最初の部分は下記になると思います。

css
1.header-left {
2  display:-webkit-box;
3  display:-ms-flexbox;
4  display:flex;
5  -webkit-box-pack: start;
6  -ms-flex-pack: start;
7  justify-content: flex-start;
8
9
10