html+css構成で適用したスタイルを、jsx+css構成に転用するとスタイルに差異が生じます。

前提・実現したいこと

先日ヘッダー・メイン・フッターを均等に配置したい旨を質問しました。
HTML - ヘッダーとメインとフッターを均等に配置したいです。｜teratail
（ご回答いただきありがとうござました。）
ご回答いただいた内容を確認したところ、実現したいことが実装できました。
デモ

そこで、私が制作中のReactのプロジェクトに先のデモのCSSを転用したところ、先のデモと同じスタイルにならず、ヘッダー・メイン・フッターが均等に配置できませんでした。
下記は均等に配置できなかったjsx+css構成のデモです。
デモ2

Reactでも先のデモと同じようにヘッダー・メイン・フッターを均等に配置したいです。

htmlとcssは先のデモからコピペしているためコードの書き間違いは無さそうですが、ファイルの構成によりスタイルに差異が出ることは疑問を感じています。
そのため初歩的なミスをしている可能性があります。
ただ、そのミスに気づけなかったこと及び原因が分からなかったので質問した次第です。

発生している問題

html+css構成のスタイル：ヘッダー・メイン・フッターが均等に配置できている（実現したいことができたスタイル）
jsx+css構成のスタイル：ヘッダー・メイン・フッターが均等に配置できていない

また、問題を言い換えると、ファイルの構成によりスタイルに差異が生じてしまっています。

該当のソースコード

jsx
1import * as React from "react";
2import "./style.css";
3
4export default function App() {
5  return (
6    <>
7      <header>
8        <h1>header</h1>
9        <p>a</p>
10      </header>
11      <main>
12        <h2>main</h2>
13        <p>a</p>
14        <p>a</p>
15      </main>
16      <footer>
17        <h2>footer</h2>
18        <p>a</p>
19      </footer>
20    </>
21  );
22}

css
1body {
2  text-align: center;
3  margin: 0;
4  display: flex;
5  flex-direction: column;
6  min-height: 100vh;
7}
8
9header {
10  background: tomato;
11  padding: 1%;
12}
13
14main {
15  background: steelblue;
16  padding: 1%;
17  margin: auto 0;
18}
19
20footer {
21  background: lightgreen;
22  padding: 1%;
23}
24