ファーストビューの写真を目いっぱいまで広げて、その上にheaderを重ねたい

Question

前提・実現したいこと

写真を上までいっぱいに広げて、そのうえにheader-wrapperを置きたいです。
また、写真の両サイドについている微妙な余白もなくしたいです。

該当のソースコード

<header>

  <div class="header-wrapper">
   <h1 class="header-left"><a href="#">Cresta Design</a></h1>
   <ul class="header-nav">
    <li class="header-item"><a href="#">Concept</a></li>
    <li class="header-item"><a href="#">Service</a></li>
    <li class="header-item"><a href="#">Works</a></li>
    <li class="header-item"><a href="#">Contact</a></li>
   </ul>

   <button class="burger-btn">
    <span></span>
    <span></span>
    <span></span>
   </button>

  </div>




 </header>
 <main>
  <div id="fv">
   <div class="main-wrapper">
    <p class="main-copy">Contact</p>

   </div>
   <p class="message-left">Our works</p>
  </div>

該当のソースコード

header {

 position: absolute;
 top: 0%;
 left: 0%;
 z-index: 1;

 width: 100%;

 .header-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 30px 126px;
  line-height: 21px;



  .header-left {
   font-size: 2.6rem;

  }

  .header-nav {
   display: flex;


   .header-item {
    padding-right: 35px;
    font-size: 1.8rem;

   }

   .header-item:last-of-type {
    padding-right: 0;

   }
  }

  .fa-bars {
   display: none;
  }

  .burger-btn {
   display: none;
  }
 }





}




/*---------------------*/
/*ファーストビュー*/
/*---------------------*/
#fv {

 background-image: url(../img/[e-mail]);
 object-fit: cover;
 background-size: contain;
 background-position: center;
 min-height: 453px;
 height: 90vh;
 position: relative;

 .main-wrapper {
  position: absolute;
  top: 30%;
  left: 45%;

  color: $white;
  margin-bottom: 172px;
  display: block;


  .main-copy {
  
   font-size: 7rem;
  }


 }

 .fv-img {

  object-fit: cover;

  min-height: 100%;
 



 }
}

試したこと

同様のつくりのトップページである、「index.html」からそのままコピーして必要な個所だけ訂正して使っていました。
index.htmlではできていたので、どこか原因なのかさっぱりわからなくなってしまいました。

①teratil過去質問に同様の質問がないか確認
→同様の要素を重ねたいという質問はあったが、該当するものがないと感じました。

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

現状イメージ

※現在、背景白の上に文字色白となっていて通常では見えづらいため、一時的に他のツールにて色付けしていますがこちらの色に関するものは本コードとは一切関係ございませんのでご了承ください。
ちなみに色付けなしの本来の見た目だと以下のようになります。

Answer 1

最終的にレイアウトが不明なので、とりありず、

また、写真の両サイドについている微妙な余白もなくしたいです。

に関しては、下記でブラウザの既定の余白をリセットすればいいでしょう。

body {
  margin: 0;
}

---

写真を上までいっぱいに広げて、そのうえにheader-wrapperを置きたいです。

#fv の上部に余白がでる現象のことなら、マージンの相殺という現象ですね。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

対処法は検索すればいろいろ見つかると思いますが、下記のようにoverflow: hidden;を追加するといいでしょう。

#fv {
  overflow: hidden;
}

Comments

[mitrasi]

ご回答ありがとうございます！

おかげさまで無事解決しました????
本当にありがとうございました

[m.ts10806]

横から申し訳ない。
>それはリセットCSSでやっているはずなのに」
質問に書いてないことが考慮されるわけがないですよね。

[mitrasi]

左様でございますね！失礼いたしました????