【HTML/CSS】ヘッダーと背景色を固定して余白調整する方法

概要

Airbnbのサイトを模写していて、ヘッダーの固定、背景色、余白のやり方に少し悩み、解決したので手順と考え方、コードを記載します。
※該当サイト⇩

Airbnbでホ⁠ス⁠テ⁠ィ⁠ン⁠グ

コード

HTML

<div class="granHeader">
    <header id="header">
        <div class="header-logo">
            <a href="#">Bircnc</a>
        </div>
        <nav>
            <ul>
                <li>Bircncでホスティングをはじめませんか？
                </li>
                <li><a href="#"  id="gradient-button">
                    Bircncスタートツール</a>
                </li>
            </ul>
        </nav>
    </header><!-- /header --> 
</div>   

SCSS重要な箇所

.granHeader {
  position: fixed;        /* ヘッダーを画面上部に固定 */
  top: 0;                 /* 画面の最上部から配置 */
  width: 100%;            /* 幅を画面全体に拡張 */
  z-index: 100;           /* 他の要素より前面に表示 */
  background-color: #fff; /* 背景色を白に設定 */
}

#header {
  display: flex;                  /* フレックスボックスモデルを使用して配置 */
  justify-content: space-between; /* 子要素を両端に分散配置 */
  align-items: center;            /* 子要素を中央揃えに配置 */
  height: 80px;                   /* 高さを80pxに設定 */
  max-width: 1450px;              /* 最大幅を1450pxに設定 */
  margin: 0 auto;                 /* 上下のマージンを0、左右のマージンを自動調整で中央寄せ */
  padding: 0 80px;                /* 上下のパディングを0、左右のパディングを80pxに設定 */
  background-color: #fff;         /* 背景色を白に設定 */  
  color: rgb(34, 34, 34);         /* 文字色をダークグレーに設定 */
}

解説

まず”granHeader ”クラスで”最上部に固定”し、画面全体の幅を持たせ背景色を白色にします。

”#header”IDはフレックスモデルで左右に分散配置します、ここで普段containerクラスなどで設定している最大幅"max-width: 〇〇〇px"と中央揃え”margin: 0 auto”と内側の余白"padding: 0  〇〇px"を持たせます。

これで背景は親要素の白色を保持したまま、内側の余白も下の要素に合わせ厄介なposition  fixedの作用を起こさせずに整えることが出来ます。

※全SCSS

/*-------------------------------------------
#header
-------------------------------------------*/
.granHeader {	
	position: fixed;
	top: 0;	
	width: 100%;
	z-index: 100;
	background-color: #fff;
}

#header {
	@include flexMode(space-between);
	max-width: 1450px;
	margin: 0 auto;
	padding: 0 80px;
	background-color: #fff;
	height: 80px;	
	color: $darkColor;

	.header-logo a {
		font-size: 2rem;
		font-weight: bold;
		color: $redWine;
	}

	nav ul {
		@include flexMode(space-between);
		li {
			font-weight: bold;
		}
		a {
			display: inline-block;
			font-size: 1.125rem;
			color: #fff;
			background-color: #E01761;
			padding: 10px 23px;
			margin-left: 24px;
			border-radius: 8px;
		
			#gradient-button {
				transition: opacity 0.3s ease;
				opacity: 1;
			}

		.fa {
			margin-right: 5px;
			opacity: 1;
			&:hover {
				opacity: 1;
			}
		}
		}	
	}
}