レイアウトでよくあるケースについて、説明します。
要素の横幅、高さの設定について width, height
要素の高さは、ほとんどのケースで設定しません。
横幅はほとんどの場合、％指定を行います。（ごく小さい要素の場合は、px指定する場合があります）
レスポンシブデザインの場合、デバイスの幅が狭くなると、要素の高さは高くなります。
また、幅もデバイスのサイズによって、使える領域が異なってきます。
高さを設定してしまうと、レイアウト崩れの原因になる場合が多いので、注意しましょう。
幅を固定値にした場合に、画面に入りきらないサイズのpxを設定してしまうと、レイアウト崩れが発生します。
コンテンツの内容に対して、padding（ボックスの内側の余白）を設定することで、美しくレイアウトしましょう。
高さ設定を行うケースは、例えば、高さを固定して縦のスクロールバーを出したい場合などです。
その場合は、以下のように設定しましょう。
height: 300px; /*要素の高さ*/
overflow-y: auto; /*オーバーフローした子要素があれば、自動でスクロールバーを表示*/
要素の左右に余白が入る＝ボックスタイプの要素が中央配置 margin: 0 auto
要素の左右に余白が入り、要素セットが中央に配置されるパターンの場合は、全体をdivで括り、クラス名をつけ、中央配置に（marginの左右をautoに設定）します。
中央に配置されるには、幅設定が必要です。
最大値1200pxを設定（max-width）することで、1200px以上の画面の場合に中央配置されます。
1200pxより小さい画面幅では、最低限の余白設定が必要なので、左右のpaddingを設定しています。
base.cssを使う場合は、divタグのcontainerクラスで括りましょう。
背景が画面の端まである
背景が画面左右まである場合は、セクションに新しいクラス名（例: bg-full）をつけて、背景色を設定します。
要素への2個目のクラス名の設定は、半角スペースで区切って書きます。
セクション内の子要素全体は、divタグのcontainerクラスで括っておきましょう。
要素の中で縦に子要素が積まれる display: block ブロックタイプの要素
図の例の場合、クラス名col-right要素の中に、h3とpが入っています。
h3とpは、ブロックタイプとなりますので、デフォルト設定の幅が親に対して100％です。
そのため、特にCSSを指定しなくても、書いた順番で縦に積みあがります。
インラインタイプとブロックタイプの違いは、以下の記事を参照しましょう。
子要素が左から順に横に並ぶ display: flex
display: flex を親要素に設定すると、子要素が左から順に1行で並びます。
子要素が右から順に横に並ぶ flex-direction: row-reverse
dispyay: flexが指定された要素に、flex-directionを設定すると、並びの方向を変更できます。
無指定の場合は、デフォルト値のrowが適用されます。
flex-direction: row （デフォルト、左から右へ）
flex-direction: row-reverse（右から左へ）
flex-direction: column（上から下へ）
flex-direction: column-reverse（下から上へ）
要素の中で子要素が左右に別れて配置される justify-content: space-between
flexの子要素を、左右の余白を無くして均等配置できます。
justify-content: space-between; を指定します。
画像の例では、header-inner要素の3つの子要素（logo、nav-button、gnav）がありますが、PCの場合はnav-buttonが非表示なので、logoとgnavが左右に分かれて表示されています。
他のオプションは、このような動きをします。
justify-content: space-around; /*左右余白アリの均等配置*/
justify-content: flex-start; /*左寄せ横並び*/
justify-content: flex-end; /*右寄せ横並び*/
要素をもとの位置から少しだけズラしたい position: relative +位置指定
position: relative を指定すると、相対配置（元の場所からの位置設定）の設定ができます。
1枚目は、po20tクラスを付与し、position: relativeに加えて、top: -20pxを指定しています。
（マイナスの数値では上に上がり、プラスでは下に下がります）
2枚目は、po20rクラスを付与し、position: relativeに加えて、right: -20pxを指定しています。
（マイナスの数値では右にずれ、プラスでは左にずれます）
position指定しているときに使える位置設定には、以下の4つがあります。
top 上から
bottom 下から
left 左から
right 右から
positionには、absolute(絶対配置)や、fixed(画面へ固定)、sticky(要素内でスクロールが終わるまで固定配置)などがあります。
mdn web docs: position
https://developer.mozilla.org/ja/docs/Web/CSS/position
画面の中に要素を常に固定したい position:fixed +位置指定
メニューアイコン、お問い合わせやSNSボタンなど、重要度が高いものを画面内に固定表示する場合があります。
その場合は、position:fixed を指定します。
画像の例では、ヘッダーがスクロールされても画面の上部に固定されています。
top: 0
left:0
の設定によって、位置を指定し、width: 100% によって幅を設定しています。
z-index: 10 という箇所は、positionを使った場合に指定できる「重ね順」の設定です。
数値が大きいほど、上に表示されます。
mdn web docs: z-index
https://developer.mozilla.org/ja/docs/Web/CSS/z-index
