floatを使うと高さがそろわなくなる問題

Question

h1 {
text-align: center;　＊ベストナインメーカ＊
}
h2 {　　　　　　　　　　　　＊説明＊
font-size: 24px;
text-align: center;
float: left;
width:calc(100%/3);
background-color: red;
}
h3 {　　　　　　　　　　　＊データ＊
font-size: 24px;
text-align: center;
background-color: green;
float: left;
width:calc(100%/3);

このようにコードを書くと、画像のように微妙に高さがずれてしまいます。
これをそろえるにはどうしたらよいのでしょうか？

Answer 1

こちら追加でいかがでしょうか?

h2,
h3 {
  margin: 0;
}

Answer 2

h2とh3ではデフォルトで設定されているMarginが異なることに起因します。

h1 {
text-align: center;
}
h2 {
font-size: 24px;
text-align: center;
float: left;
width:calc(100%/3);
background-color: red;
margin:1em 0;
}
h3 {
font-size: 24px;
text-align: center;
background-color: green;
float: left;
width:calc(100%/3);
margin:1em 0;
}

で調整できました

Answer 3

既に解決していますが、それぞれの要素が現状どのようなスタイルがあたっているかはデベロッパーツールを使えば確認できるので使ってみてください。

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

Answer 4

とても初歩的な質問だったと思いますが、お二人とも回答の方ありがとうございました。
margin: 0 を追加することで揃えることができました。
大変助かりました。ありがとうございました！