ヘッダー部分に余白ができており、余白を埋めたいです。これをz-indexでfv-画像上に載せたいのですが、載せることができません。

前提・実現したいこと

ヘッダー部分に上下左右に余白があるので、余白を埋めてすっきりさせたいです。

ここに質問の内容を詳しく書いてください。
ヘッダー部分に余白ができており、余白を埋めたいです。
まず、上部の余白はheaderの高さが原因でした。これをz-indexでfv-画像上に載せたいのですが、
載せることができません。

1.載せる方法の一つに共通親要素(EX.header-inner)で囲み、
positionを使えばできる感じがします.

Q.それとは別に下記のようにfvとheaderをそれぞれ分けて行いたいです。
可能でしょうか？ー方法が知りたいですm(__)m

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

問題は、サイトに余白が残ってしまう点です。
headerがz-indexに適用されないこともあり、初めは余白が残っていました。
その後、body要素の大きさをmax-1200pxに変更したところ、下記のような画像になりました。

そして、下のworksなどは中央揃えでフルカバーになっていますが、headerだけ中央揃えではないのと
余白ができてしまいました。

該当のソースコード

HTML
1<head>
2    
3    <link rel="stylesheet" href="css/destyle.css">
4    <link rel="stylesheet" href="css/style.css">
5    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
6</head>
7<body>
8    <!--ヘッダー-->
9    <header class="header">
10        <div class="header-inner">
11            
12                    <h1 id="logo">Cresta Design</h1>
13                   
14                    <nav class="header-wrapper">
15                            <ul class="header-list">
16                                <li class="list-item"><a href="#">Concept</a></li>
17                                <li class="list-item"><a href="#">Service</a></li>
18                                <li class="list-item"><a href="#"> Works</a></li>
19                                <li class="list-item"><a href="./Contact.html">Contact</a></li>
20                            </ul>
21                    </nav>
22        </div>
23            
24            <button class="burger-btn">
25                <span class="bar-bar_top"></span>
26                <span class="bar-bar_mid"></span>
27                <span class="bar-bar_bottom"></span>
28            </button>
29           
30
31            <div class="image-inner">
32                <div class="fv">
33                       <ul class="slider">
34                           <li><img src="./image/fv-bgi_01@2x.jpg" alt="1枚目"></li>
35                           <!--<li><img src="./image/fv-bgi_02@2x.jpg" alt="2枚目"></li>
36                           <li><img src="./image/fv-bgi_03@2x.jpg" alt="3枚目"></li>-->
37                       </ul>
38                </div>
39                <div class="image-message">
40                        <p>Design for Smile. <br class="sp-br">快適なオフィスを  デザインする</p>
41                </div>
42            </div>
43        </div>
44        
45    </header>
46
47
48    <!---->
49
50<!--メイン-->
51    <main class="main">
52        <!--コンセプト-->
53        <section class="concept">
54            <h2 class="sub-title ">CONCEPT</h2>
55            <div class="section-inner">
56                <p class="message">
57                “働きたくなる空間”をデザインすることで <br class="pc-br">
58                    人々を幸せにする。"
59                </p>
60                <div class="explain">
61                    <p class="text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を
62                        幸せにできるのではないか」と考えるためです。
63                    </p>
64                    <div class="concept-image">
65                            <img src="image/concept-image@2x.jpg"  alt="コンセプトイメージ">
66                    </div>
67                   
68                </div>
69                <div class="section-bottom concept-bottom text-right">Our concept </div>
70            </div>
71            
72 
73        </section>
74<!---->
75<!--Works-->
76        <section class="works">
77            <h2 class="sub-title text-right text-white works-title">works</h2>
78            <ul class="works-list">
79                <li class="works-item">
80                    <a href="#">
81                        <p class="works-text">
82                            新規サイトを公開しました。今回のサイトは <br>
83                            白と黒を基調にしたミニマルなデザインに <br>
84                            なっています。
85                        </p>
86                    </a>
87                    <div class="works-image"><img src="image/card-img01@2x.jpg" alt="" ></div>
88                </li>
89                <li class="works-item">
90                    <a href="#">
91                        <p class="works-text">
92                            新規サイトを公開しました。今回のサイトは <br>
93                            白と黒を基調にした
94                        </p>
95                    </a>
96                    <div class="works-image"><img src="image/card-img02@2x.jpg"  alt="" ></div>
97                </li>
98                <li class="works-item">
99                    <a href="#">
100                        <p class="works-text">
101                            新規サイトを公開しました。今回のサイトは <br>
102                            白と黒を基調にしたミニマルなデザインに <br>
103                            なっています。
104                        </p>
105                    </a>
106                    <div class="works-image"><img src="image/card-img03@2x.jpg" alt="" ></div>
107                </li>
108            </ul>
109            <div class="works-link cmn-link">
110                <a href="#">
111                    <p>View more</p>
112                </a>
113            </div>
114
115            <div class="section-bottom text-white">Our works </div>
116        </section>
117<!---->
118
119<!--Service-->
120       抜粋！　R: 字数制限により
121        
122<!---->
123<!--Contact-->
124抜粋！　R: 字数制限により
125        
126    </main>
127<!--メイン-->
128
129
130<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
131<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
132</body>
133</html>

general.scss
1
2html{
3    font-size: 62.5%;
4}
5body{
6    background-color: #fff;
7
8    font-size: 1.6rem;
9    letter-spacing: .05em;
10    color: #171717;
11    font-family: 'Noto Serif' 'Noto Serif JP' serif;   
12    
13}
14
15img{
16    width: 100%;
17    height: auto;
18    vertical-align: bottom;/*余白ができるから指定する*/
19    
20}
21
22a{
23    text-decoration: none;
24}
25
26
27
28/*共通項*/
29.section-wrapper{
30    //padding: 100px 0px 70px;
31    @include overTab{
32        padding: 100px 0 40px;
33    }
34}
35
36.sub-title{
37    max-width: 1000px;
38    color: #282f35;
39    font-size: 6rem;
40    font-style: italic;
41    margin: 0 auto 80px;
42    padding: 0 20px;
43    @include overTab{
44        padding: 0 4vw;
45        font-size: 3rem;
46        margin-bottom: 50px;
47    }
48}
49
50/*擬似要素*/
51.sub-title::after{
52    content: "";
53    display: inline-block;
54    background-color: #282f35;
55    width: 200px;
56    height: 5px;
57    margin-left: 30px;
58    vertical-align: middle;/*線を中央揃え*/
59    color: #282F35;
60
61}   
62.section-inner{
63    max-width: 1000px;
64    margin: 0 auto;
65    padding: 0 50px;
66    @include overTab{
67        padding: 0 4vw;       
68    }
69}
70.text-right{
71    text-align: right;
72    
73
74}
75
76.text-white{
77    color: #fff;
78}
79.text-white::after{
80    background-color: #fff;
81}
82
83
84.section-bottom{
85    max-width: 1200px;
86    margin: 0 auto;
87    margin-top: 70px;
88    margin-bottom: 70px;
89    font-size: 9rem;
90    opacity: .05;
91    @include overTab{
92        font-size: 4rem;
93        padding: 0 4vw;
94        }
95
96}
97/*ボタン*/
98.cmn-link{
99    width: 235px;
100    line-height: 60px;
101    margin: 0 auto 70px;
102    background-color: #F7D43F;
103    border: 0px 0px 6px #1b1310;
104    box-shadow: #1B1310;
105    border-radius: 30px;
106    text-align: center;
107    color: #171717;
108    font-weight:bold ;
109    text-decoration: none;
110    transition: .3s;
111    @include overTab{
112        margin-bottom: 40px;
113        }
114}
115
116.cmn-link:hover{
117    opacity: .7;
118    transition: .3s;
119    }
120
121/*レスポンシブ対応*/
122

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

回答1件

大変申し訳ございません。字数制限により添付できなかったため、下記にも添付いたします。
header.scssです。

header.scss
1
2.header{
3    padding: 19px 30px;
4    box-sizing: border-box;
5    width: 1200px;
6    height: 752px;
7    position: relative;
8    /*ヘッダーfixed対応*/
9    transition: .3s;
10    .header.fixed{
11        position: fixed;
12        background: #282f35;
13        padding: 30px;
14        width: 100%;
15        transition: .3s;
16    }
17
18
19    @include overTab{
20        .header{
21            padding: 30px 4vw;
22        }
23    }
24    
25
26
27.header-inner{
28    display: flex;
29    justify-content: space-between;
30    align-items: center;
31    max-width: 1200px;
32    margin: 0 auto;
33    background-color: tomato;
34    
35    
36
37    #logo{
38        padding-left: 120px;
39        margin-top: 19px;
40        font-family: 'Noto Serif';
41        font-size: 2.6rem;
42        color: #fff;
43        }
44    
45    }
46
47    .header-wrapper{
48       
49        @include overTab{
50            display: none;
51            position: fixed;
52            top: 0;
53            left: 0;
54            width: 100%;
55            height: 100vh;
56            background-color: #282f35; 
57         }
58       
59       
60
61        .header-list{
62                display: flex;
63                justify-content: flex-end;
64                align-items: center;
65                margin-right: 120px;
66
67            .list-item{
68                display: flex;
69                justify-content: space-between;
70                align-items: center;
71                >a {
72                    text-transform:inherit;
73                    font-size: 16px;
74                    color: #fff;
75                    transition: .3s;
76                    font-weight: bold;
77                    font-style: italic;
78                }
79                
80                
81                + .list-item{
82                    padding-left: 30px;
83
84                    }
85                }
86            }
87        }
88    }
89
90/*ボタン*/
91.burger-btn{
92    display: flex;
93}
94
95.image-inner{
96    .fv{
97        
98        background-position: center;
99        background-size: cover;
100        background-repeat: no-repeat;
101        .img{
102            height: 100vh;
103            object-fit: cover;
104        }
105        
106    }
107    
108
109
110
111.image-message{
112    position: absolute;
113    top: 400px;
114    left: 177px;
115    padding-bottom: 170px;
116
117        > p {
118            font-size: 5rem;
119            line-height: 1.4;
120            color: #fff;
121
122        }
123
124            .sp-br{
125                display: block;
126                
127                @include overTab{
128                    .sp-br{
129                        display: none;
130                        
131                    }
132                }
133
134            }
135        }
136    }