bootstrapで横並びにできるが，badgeバッジのデザインが崩れる

Question

bootstrapで下記のように書いて，「名前」の項目と「バッジ名」を横並びにできますが，badge バッジのデザインが崩れ，バッジの楕円が少し縦長に表示されてしまいます。
きれいに横並びにして，尚且つ 名前とバッジのスペースを調整する方法も知りたいです。
ご教授いただければ幸いです。

<div class="d-flex flex-row"><div class="lead">名前: <?php echo $user_name; ?></div><div class="badge rounded-pill bg-secondary">バッジ名</div></div>

Answer 1

自 己 解 決 し ま し た 。