二度目の投稿です。
今回は失敗からなるほど！！！！！が生まれたので
反省含めて載せます
結論から言えば、何もおかしくないし当たり前でした

一箇所だけだしなんでやと思いました

こちらコードです

(base.scss)

html {
  font-size: 62.5%;
}

(header.scss)

  h1 {
    font-size: 3.6rem;
    margin: 1.6em 0 1.6em 12em;

    @include mq() {
      font-size: 2.4rem;
      margin-left: 1.6em;
    }
  }

他の部分は思った通りになるんです、、、

検証ツールで実際何pxになっているのかみてみます

57.6px

どうしてええええええええええw

emのコンパイル後の値ってfont-size × emの値だから
emのコンパイル後の値 ÷ emの値で何倍かわかるのでは？

57.6 ÷ 1.6 = 36

36…あ、font-size!?となりました
あれでも62.5%で指定したのになぜ、、、、、

emとremの知識がごちゃ混ぜになってました

調べてたどり着いた神記事です

rem
文書のルート要素、つまりhtml要素のfont-sizeを基準にする

remはroot要素

em
親要素のfont-sizeを基準に大きさを計算する

emは親要素

つまり馬鹿だった

当たり前だった、h1ではfont-sizeを上書きしているから
font-size 36pxを基準にemも計算される
36 × 1.6 = 57.6
何もおかしくなかった
私が書いたコードを忠実に再現してくれただけだった

そして学んだfont-sizeを親要素に指定してたらemが思う通りにならないってことは、、、

よく検証ツールとかでみてて疑問だったことがある
なんでいちいちテキスト系divタグとかで囲ってんの？？？
しかも空だし、わからない、、、

これの謎が今回馬鹿をしたことでわかりました
親要素に左右されるので、親要素に当たるところにfont-sizeのrem指定があると良くない
だからdivタグで空の親要素を作ってたのか！！！！！
text系でmarginやpadding取らないようにしようと感じました

すごい初歩的な話ですが間違えて、馬鹿したことで理解が深まりました
これからも頑張ります！
ここまで読んでくれて、ありがとうございます
それでは、また！