「position:fixed」をかけると横幅設定が消えます

①ヘッダー内の「h-nav」にposition:fixedを設定すると、
「inr」で設定した width:980px, margin:0 auto が消えてしまいます。
横幅を維持したまま position:fixed を適用することは可能でしょうか。

②position:fixedした「h-nav」を、「main」から下に移動した際に、
「color:black, background:white, border-bottom:1px solid black」を適用させたいのですが、
どのように設定すればできるのでしょうか。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
7  <script src="https://kit.fontawesome.com/fb63ee4e0c.js" crossorigin="anonymous"></script>
8  <link rel="stylesheet" href="write.css">
9  <title>Document</title>
10</head>
11<body>
12  <div class="container">
13    <header class="header">
14      <div class="inr">
15        <div class="h-nav">
16          <div class="h-n-left">Shiro</div>
17          <div class="h-n-right"><i class="fas fa-bars"></i></div>
18        </div>
19        <div class="h-center">
20          <div class="h-c-title">Shiro</div>
21          <div class="h-c-text">－ White flower shop －</div>
22        </div>
23      </div>
24    </header>
25    <main class="main">
26      <section class="m-section1">
27        <div class="s-h2">Comcept</div>
28        <p class="s-p">私たちShiroは、白いお花だけを取り扱うフラワーショップです。<br>
29        色とりどりの花束も素敵だけれど、洗練された「白」の美しさを感じてほしい。<br>
30        「白」に対する愛から生まれた静寂な時間が流れる店へ、ぜひお越しください。</p>
31        <img src="img/concept.png" alt="" class="s1-image">
32      </section>
33      <section class="m-section2">
34        <h2 class="s-h2">Work</h2>
35        <p class="s-p">
36          オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br>
37          ウェディングやイベントの装花なども行なっています。<br>
38          一人一人にあったご提案をさせていただきます。
39        </p>
40        <div class="s2-boxs inr">
41          <div class="s2-box">
42            <img src="img/work_gift.png" alt="" class="s2-b-img">
43            <div class="s2-b-texts">
44              <p class="s2-b-textTitle">Gift</p>
45              <p class="s2-b-text">花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</p>
46            </div>
47          </div>
48          <div class="s2-box">
49            <img src="img/work_wedding.png" alt="" class="s2-b-img">
50            <div class="s2-b-texts">
51              <p class="s2-b-textTitle">Wedding</p>
52              <p class="s2-b-text">ウエディングドレスに合わせたブーケや式場の雰囲気に合う装花をご提案。お打ち合わせの流れや回数、費用などにつきましてはお問い合わせください。</p>
53            </div>
54          </div>
55          <div class="s2-box s2-box-active">
56            <img src="img/work_decoretion.png" alt="" class="s2-b-img">
57            <div class="s2-b-texts">
58              <p class="s2-b-textTitle">Decoration</p>
59              <p class="s2-b-text">お写真を彩るお花を一輪から販売。一定期間のご契約で定期的にご自宅へ配送させていただくことも可能です。</p>
60            </div>
61          </div>
62          <div class="s2-box">
63            <img src="img/work_for_yourself.png" alt="" class="s2-b-img">
64            <div class="s2-b-texts">
65              <p class="s2-b-textTitle">For yourself</p>
66              <p class="s2-b-text">お部屋の雰囲気やライフスタイルをお聞きしてご自宅用の花束をご提案し、少しでも長く咲かせるコツもお教えします。花束に合った花瓶をご提案することも可能です。</p>
67            </div>
68          </div>
69        </div>
70      </section>
71      <section class="m-section3">
72        <h2 class="s-h2">Florist</h2>
73        <p class="s-p">
74          Shiro専属のフローリストたちをご紹介。<br>
75          得意の分野であなたのオーダーを最大限に叶えます。
76        </p>
77        <div class="s3-boxs inr">
78          <div class="s3-box">
79            <img src="img/florist_shiyu.png" alt="" class="s3-b-img">
80            <p class="s3-b-name">Shiyu</p>
81            <p class="s3-b-info">お花茶屋大学フラワーアレンジメント科を卒業後、さまざまな白い花を探すために世界を一周し、Shiroの創業者となる。</p>
82          </div>
83          <div class="s3-box">
84            <img src="img/florist_mao.png" alt="" class="s3-b-img">
85            <p class="s3-b-name">Shiyu</p>
86            <p class="s3-b-info">お花茶屋大学フラワーアレンジメント科を卒業後、さまざまな白い花を探すために世界を一周し、Shiroの創業者となる。</p>
87          </div>
88          <div class="s3-box">
89            <img src="img/florist_omichan.png" alt="" class="s3-b-img">
90            <p class="s3-b-name">Shiyu</p>
91            <p class="s3-b-info">お花茶屋大学フラワーアレンジメント科を卒業後、さまざまな白い花を探すために世界を一周し、Shiroの創業者となる。</p>
92          </div>
93        </div>
94      </section>
95      <section class="m-section4">
96        <h2 class="s-h2">Shop infomation</h2>
97        <p class="s-p">Shiroの店舗情報をご紹介します。</p>
98        <div class="s4-boxs">
99          <div class="s4-box inr">
100            <img src="img/shop_information.png" alt="" class="s4-b-img">
101            <table class="s4-table">
102              <tbody class="s4-tbody">
103                <tr class="s4-tr">
104                  <th class="s4-th">住所</th>
105                  <td class="s4-td">〒810-0001<br>福岡県福岡市中央区天神0-0-0</td>
106                </tr>
107                <tr class="s4-tr">
108                  <th class="s4-th">電話番号</th>
109                  <td class="s4-td">0120-000-000</td>
110                </tr>
111                <tr class="s4-tr">
112                  <th class="s4-th">営業時間</th>
113                  <td class="s4-td">11:00-20:30<br>（定休日：水曜日）</td>
114                </tr>
115                <tr class="s4-tr">
116                  <th class="s4-th">アクセス</th>
117                  <td class="s4-td">天神駅12a出口から徒歩6分</td>
118                </tr>
119              </tbody>
120            </table>
121          </div>
122        </div>
123      </section>
124      <section class="m-section5">
125        <h2 class="s-h2">Contact us</h2>
126        <p class="s-p">イベントや結婚式でご利用する装花のご相談や、<br>フラワーアレンジメントのご予約などはこちらからお問合せください。</p>
127        <div class="s-contact">
128          <a href="#"><i class="fas fa-arrow-right"></i>お問い合わせ</a>
129        </div>
130      </section>
131      <footer class="footer">
132        Copyright © Shiro All Rights Reserved.
133      </footer>
134    </main>
135  </div>
136</body>
137</html>
138コード

css
1.container {
2    max-width: 100%;
3    margin: 0 auto;
4}
5
6.inr {
7    max-width: 980px;
8    margin: 0 auto;
9}
10
11.header {
12    background-image: url(img/header.png);
13    background-size: cover;
14    height: 800px;
15    color: white;
16    overflow: hidden;
17}
18
19.h-nav {
20    height: 110px;
21    display: flex;
22    justify-content: space-between;
23    align-items: center;
24    position: fixed;
25    left: 0;
26    right: 0;
27    z-index: 10;
28    width: auto;
29}
30
31.h-n-left {
32    font-size: 30px;
33    font-weight: bold;
34}
35
36.fa-bars {
37    font-size: 30px;
38}
39
40.h-center {
41    text-align: center;
42    position: absolute;
43    top: 50%;
44    left: 50%;
45    transform: translate(-50%, -50%);
46}
47
48.h-c-title {
49    font-size: 110px;
50    padding-bottom: 20px;
51}
52
53.m-section1 {
54    text-align: center;
55    padding: 50px 0;
56    background: linear-gradient(#fff 70%, #ededed 30%);
57}
58
59.s-h2 {
60    font-size: 30px;
61    font-weight: bold;
62    padding-bottom: 30px;
63    margin-bottom: 30px;
64    position: relative;
65}
66
67.s-h2::after {
68    content: '';
69    background: black;
70    width: 60px;
71    height: 1px;
72    position: absolute;
73    top: 100%;
74    left: 50%;
75    transform: translateX(-50%);
76}
77
78.s-p {
79    line-height: 2;
80    font-size: 18px;
81    padding-bottom: 50px;
82}
83
84.s1-image {
85    width: 980px;
86}
87
88.m-section2 {
89    text-align: center;
90    padding: 50px 0;
91}
92
93.s2-boxs {
94    display: flex;
95    flex-direction: column;
96    flex-wrap: wrap;
97    align-content: space-between;
98    height: 1580px;
99}
100
101.s2-box {
102    width: 44%;
103}
104
105.s2-box-active {
106    margin-top: 100px;
107}
108
109.s2-b-img {
110    padding-bottom: 30px;
111    width: 100%;
112}
113
114.s2-b-textTitle {
115    text-align: left;
116    font-size: 25px;
117    font-weight: bold;
118    padding-bottom: 10px;
119}
120
121.s2-b-text {
122    text-align: left;
123    line-height: 2;
124    font-size: 17px;
125}
126
127.m-section3 {
128    text-align: center;
129    background: linear-gradient( #ededed 50%, #fff 50%);
130    padding: 100px 0;
131}
132
133.s3-boxs {
134    display: flex;
135    justify-content: space-between;
136    height: 400px;
137}
138
139.s3-box {
140    width: 300px;
141    text-align: left;
142}
143
144.s3-b-img {
145    padding-bottom: 25px;
146}
147
148.s3-b-name {
149    font-size: 25px;
150    font-weight: bold;
151    padding-bottom: 10px;
152}
153
154.s3-b-info {
155    line-height: 2;
156    font-size: 16px;
157}
158
159.m-section4 {
160    text-align: center;
161}
162
163.s4-boxs {
164    height: 500px;
165}
166
167.s4-b-img {
168    width: 50%;
169}
170
171.s4-box {
172    display: flex;
173    justify-content: space-between;
174}
175
176.s4-table {
177    width: 47%;
178    text-align: left;
179    border-spacing: 18px;
180    border-collapse: separate;
181    letter-spacing: 1.5px;
182    line-height: 2;
183    box-sizing: border-box;
184    font-size: 18px;
185}
186
187.s4-tr {
188    margin-left: 10px;
189}
190
191.s4-th {
192    border-right: 1px solid black;
193    padding-right: 30px;
194}
195
196.m-section5 {
197    text-align: center;
198    background-image: url(img/contact_us.png);
199    background-size: cover;
200    height: 500px;
201}
202
203.s-contact {
204    padding: 30px 90px;
205    background: white;
206    display: inline;
207    font-size: 20px;
208    letter-spacing: 2px;
209    border: 1px solid black;
210}
211
212.s-contact a {
213    text-decoration: none;
214    color: black;
215}
216
217.fa-arrow-right {
218    padding-right: 15px;
219    font-size: 20px;
220}
221
222.footer {
223    height: 40px;
224    text-align: center;
225    line-height: 2;
226    font-size: 16px;
227    letter-spacing: 2px;
228}
229コード