[React] h1タグの内容を横一行表示させたい

Question

**やりたいこと: **
My Expertiseのh1を横一行100%で表示して、その下の行に「Expeties」などを表示させたいです。

現状:
隣同士に並んでしまっている。

試したこと:
h1以降の項目をdivで囲ってみましたが、思ったようにいきませんでした。
試すべきことアドバイスいただけますと助かります。

export default function Skill(props) {
	return (
		<>
			<div className="SkillPage">
				<h1>My Experties</h1>
				<div id="wrapper">
					<h2>Experties</h2>
					<PieChart width={330} height={250}>
					</PieChart>
					<h2>Field</h2>
					<PieChart width={330} height={250}>
					</PieChart>
					<h2>Tools</h2>
					<PieChart width={330} height={250}>
					</PieChart>
				</div>
			</div>
		</>
	);
}

.SkillPage {
  background:white;
  height:500px;
  margin-top: 20%;
  display: flex;
  h1{
    width: 100%;
  }
}

Answer 1

display: flexを削除してみてはどうですか？

Answer 2

ありがとうございました。
削除して解決できました。