fvが小さすぎるので全体に広げたい

前提・実現したいこと

1main-image,.scssの画像が小さすぎるので、画面全体に広げたい
2navをfv-画像の上に載せたい

該当のコード

html
1省略
2HTMLが文字数オーバーとなってしまうため、下記に記入致しました。大変申し訳ございません！！！
3

css
1@charset "UTF-8";
2html {
3  font-size: 62.5%;
4}
5
6body {
7  background-color: #fff;
8  width: 1440px;
9  font-size: 1.6rem;
10  letter-spacing: .05em;
11  color: #171717;
12  font-family: 'Noto Serif' 'Noto Serif JP' serif;
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@media print, screen and (max-width: 768px) and (min-width: 960px) {
28  .section-wrapper {
29    padding: 100px 0 40px;
30  }
31}
32
33.sub-title {
34  max-width: 1000px;
35  color: #282f35;
36  font-size: 6rem;
37  font-style: italic;
38  margin: 0 auto 80px;
39  padding: 0 20px;
40}
41
42@media print, screen and (max-width: 768px) and (min-width: 960px) {
43  .sub-title {
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  /*線を中央揃え*/
60  color: #282F35;
61}
62
63.section-inner {
64  max-width: 1000px;
65  margin: 0 auto;
66  padding: 0 50px;
67}
68
69@media print, screen and (max-width: 768px) and (min-width: 960px) {
70  .section-inner {
71    padding: 0 4vw;
72  }
73}
74
75.text-right {
76  text-align: right;
77}
78
79.text-white {
80  color: #fff;
81}
82
83.text-white::after {
84  background-color: #fff;
85}
86
87.section-bottom {
88  max-width: 1200px;
89  margin: 0 auto;
90  margin-top: 70px;
91  margin-bottom: 70px;
92  font-size: 9rem;
93  opacity: .05;
94}
95
96@media print, screen and (max-width: 768px) and (min-width: 960px) {
97  .section-bottom {
98    font-size: 4rem;
99    padding: 0 4vw;
100  }
101}
102
103/*ボタン*/
104.cmn-link {
105  width: 235px;
106  line-height: 60px;
107  margin: 0 auto 70px;
108  background-color: #F7D43F;
109  border: 0px 0px 6px #1b1310;
110  -webkit-box-shadow: #1B1310;
111          box-shadow: #1B1310;
112  border-radius: 30px;
113  text-align: center;
114  color: #171717;
115  font-weight: bold;
116  text-decoration: none;
117  -webkit-transition: .3s;
118  transition: .3s;
119}
120
121@media print, screen and (max-width: 768px) and (min-width: 960px) {
122  .cmn-link {
123    margin-bottom: 40px;
124  }
125}
126
127.cmn-link:hover {
128  opacity: .7;
129  -webkit-transition: .3s;
130  transition: .3s;
131}
132
133/*レスポンシブ対応*/
134.header {
135  padding: 19px 30px;
136  -webkit-box-sizing: border-box;
137          box-sizing: border-box;
138  width: 1200px;
139  height: 752px;
140  position: relative;
141  /*ヘッダーfixed対応*/
142  -webkit-transition: .3s;
143  transition: .3s;
144}
145
146.header .header.fixed {
147  position: fixed;
148  background: #282f35;
149  padding: 30px;
150  width: 100%;
151  -webkit-transition: .3s;
152  transition: .3s;
153}
154
155@media print, screen and (max-width: 768px) and (min-width: 960px) {
156  .header .header {
157    padding: 30px 4vw;
158  }
159}
160
161.header .header-inner {
162  display: -webkit-box;
163  display: -webkit-flex;
164  display: -ms-flexbox;
165  display: flex;
166  -webkit-box-pack: justify;
167  -webkit-justify-content: space-between;
168      -ms-flex-pack: justify;
169          justify-content: space-between;
170  -webkit-box-align: center;
171  -webkit-align-items: center;
172      -ms-flex-align: center;
173          align-items: center;
174  max-width: 1200px;
175  margin: 0 auto;
176  background-color: tomato;
177}
178
179.header .header-inner #logo {
180  padding-left: 120px;
181  margin-top: 19px;
182  font-family: 'Noto Serif';
183  font-size: 2.6rem;
184  color: #fff;
185}
186
187@media print, screen and (max-width: 768px) and (min-width: 960px) {
188  .header .header-wrapper {
189    display: none;
190    position: fixed;
191    top: 0;
192    left: 0;
193    width: 100%;
194    height: 100vh;
195    background-color: #282f35;
196  }
197}
198
199.header .header-wrapper .header-list {
200  display: -webkit-box;
201  display: -webkit-flex;
202  display: -ms-flexbox;
203  display: flex;
204  -webkit-box-pack: justify;
205  -webkit-justify-content: space-between;
206      -ms-flex-pack: justify;
207          justify-content: space-between;
208  -webkit-box-align: center;
209  -webkit-align-items: center;
210      -ms-flex-align: center;
211          align-items: center;
212  margin-right: 10px;
213}
214
215.header .header-wrapper .header-list .list-item {
216  display: -webkit-box;
217  display: -webkit-flex;
218  display: -ms-flexbox;
219  display: flex;
220  -webkit-box-pack: justify;
221  -webkit-justify-content: space-between;
222      -ms-flex-pack: justify;
223          justify-content: space-between;
224  -webkit-box-align: center;
225  -webkit-align-items: center;
226      -ms-flex-align: center;
227          align-items: center;
228}
229
230.header .header-wrapper .header-list .list-item > a {
231  text-transform: inherit;
232  font-size: 16px;
233  color: #fff;
234  -webkit-transition: .3s;
235  transition: .3s;
236  font-weight: bold;
237  font-style: italic;
238}
239
240.header .header-wrapper .header-list .list-item + .list-item {
241  padding-left: 30px;
242}
243
244/*ボタン*/
245.burger-btn {
246  display: -webkit-box;
247  display: -webkit-flex;
248  display: -ms-flexbox;
249  display: flex;
250}
251
252.image-inner .fv {
253  background-position: center;
254  background-size: cover;
255  background-repeat: no-repeat;
256}
257
258.image-inner .fv .img {
259  height: 100vh;
260  -o-object-fit: cover;
261     object-fit: cover;
262}
263
264@media print, screen and (max-width: 768px) and (min-width: 960px) {
265  .image-inner .fv {
266    width: 100%;
267  }
268}
269
270.image-message {
271  position: absolute;
272  top: 400px;
273  left: 177px;
274  padding-bottom: 170px;
275}
276
277.image-message > p {
278  font-size: 5rem;
279  line-height: 1.4;
280  color: #fff;
281}
282
283.image-message .sp-br {
284  display: block;
285}
286
287@media print, screen and (max-width: 768px) and (min-width: 960px) {
288  .image-message .sp-br .sp-br {
289    display: none;
290  }
291}
292
293.concept {
294  max-height: 811px;
295  margin: 10rem 12rem 7rem 22rem;
296}
297
298.section-inner {
299  text-align: center;
300}
301
302.section-inner .message {
303  text-align: center;
304  font-size: 3rem;
305  margin-bottom: 60px;
306  font-weight: bold;
307  line-height: 1.6;
308  font-size: 3rem;
309}
310
311@media print, screen and (max-width: 768px) and (min-width: 960px) {
312  .section-inner .message {
313    font-size: 2rem;
314    padding: 70px 45px 30px;
315  }
316}
317
318.section-inner .explain {
319  display: -webkit-box;
320  display: -webkit-flex;
321  display: -ms-flexbox;
322  display: flex;
323  -webkit-justify-content: space-around;
324      -ms-flex-pack: distribute;
325          justify-content: space-around;
326  margin: 0 auto;
327}
328
329@media print, screen and (max-width: 768px) and (min-width: 960px) {
330  .section-inner .explain {
331    display: block;
332    -webkit-box-align: center;
333    -webkit-align-items: center;
334        -ms-flex-align: center;
335            align-items: center;
336    margin-bottom: 40px;
337  }
338}
339
340.section-inner .explain .text {
341  display: block;
342  max-width: 440px;
343  line-height: 1.9;
344  font-weight: bold;
345  margin-top: 10px;
346  margin-left: 15px;
347}
348
349@media print, screen and (max-width: 768px) and (min-width: 960px) {
350  .section-inner .explain .text {
351    padding: 20px 15px;
352  }
353}
354
355.section-inner .explain .concept-image {
356  max-width: 440px;
357  height: 240px;
358  margin-left: 30px;
359}
360
361@media print, screen and (max-width: 768px) and (min-width: 960px) {
362  .section-inner .explain .concept-image {
363    max-width: 100%;
364    display: -webkit-box;
365    display: -webkit-flex;
366    display: -ms-flexbox;
367    display: flex;
368    -webkit-flex-shrink: 0;
369        -ms-flex-negative: 0;
370            flex-shrink: 0;
371    padding: 20px 15px;
372    margin: 0;
373  }
374}
375
376/*# sourceMappingURL=style.css.map */

試したこと

1.max-width: が原因なのかと思い、削除してみたが、変わらない
2画像の上に、ためにposition: absoluteなどを使ったが、反応しない

補足情報（FW/ツールのバージョンなど）

header部分に分かりやすいように、bg-color: tomato;をつけ加えていますが、→完成図では不要！！

完成図では、fvがスライド式になります。

](8ba77f513ad213cc42af3af82574225a.jpeg)

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

回答1件

                <h1 id="logo">Cresta Design</h1>
               
                <nav class="header-wrapper">
                        <ul class="header-list">
                            <li class="list-item"><a href="#">Concept</a></li>
                            <li class="list-item"><a href="#">Service</a></li>
                            <li class="list-item"><a href="#"> Works</a></li>
                            <li class="list-item"><a href="./Contact.html">Contact</a></li>
                        </ul>
                </nav>
    </div>
        
        <button class="burger-btn">
            <span class="bar-bar_top"></span>
            <span class="bar-bar_mid"></span>
            <span class="bar-bar_bottom"></span>
        </button>
       

        <div class="image-inner">
            <div class="fv">
                   <ul class="slider">
                       <li><img src="./image/fv-bgi_01@2x.jpg" alt="1枚目"></li>
                       <!--<li><img src="./image/fv-bgi_02@2x.jpg" alt="2枚目"></li>
                       <li><img src="./image/fv-bgi_03@2x.jpg" alt="3枚目"></li>-->
                   </ul>
            </div>
            <div class="image-message">
                    <p>Design for Smile. <br class="sp-br">快適なオフィスを  デザインする</p>
            </div>
        </div>
    </div>
    
</header>


<!---->

<main class="main">
    <!--コンセプト-->
    <section class="concept">
        <h2 class="sub-title ">CONCEPT</h2>
        <div class="section-inner">
            <p class="message">
            “働きたくなる空間”をデザインすることで <br class="pc-br">
                人々を幸せにする。"
            </p>
            <div class="explain">
                <p class="text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を
                    幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させて
                    いただきます。
                </p>
                <div class="concept-image">
                        <img src="image/concept-image@2x.jpg"  alt="コンセプトイメージ">
                </div>
               
            </div>
            <div class="section-bottom concept-bottom text-right">Our concept </div>
        </div>
        

    </section>

省略

    <section class="works">

省略

</main>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> </body> </html>

投稿2021/07/26 10:20

free_teku

総合スコア103