WordPressのカスタムHTMLブロックを使うと要素の高さが一定にならない

実現したいこと

WordPressでカスタムHTMLのブロックにHTMLとCSSのコードを書いてステップ図のように要素を横並びにしたい。

前提

テーマはThe Thorを使っています。

発生している問題

オンラインのエディターなどで問題ないことを確認しても、
WordPressにコードを張り付けると各ステップの横並びの頭が一定の高さになりません。
先頭の枠だけ（ステップ１）、高く表示されます。

該当のソースコード

html
1 <div class="child"><span class="box-title">1</span><p>お問い合わせ</p>
2    </div>
3 <div class="arrow">　>　</div>
4 <div class="child"><span class="box-title">2</span><p>　要望確認　</p></div>
5 <div class="arrow">　>　</div>
6 <div class="child"><span class="box-title">3</span><p>　案件確定　</p></div>
7 <div class="arrow">　>　</div>
8 <div class="child"><span class="box-title">4</span><p>　作業実施　</p></div>
9 <div class="arrow">　>　</div>
10 <div class="child"><span class="box-title">5</span><p>　納品確認　</p></div>
11 </div>
12 
13<style>
14.parent {
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 }
19 
20.child{
21    position: relative;
22    margin: 2em 0;
23    padding: 0.5em 1em;
24    height: 100px;
25    border: solid 3px #202F55;
26}
27.child .box-title {
28    position: absolute;
29    display: inline-block;
30    top: -27px;
31    left: -3px;
32    padding: 0 20px;
33    height: 25px;
34    line-height: 25px;
35    font-size: 20px;
36    background: #202F55;
37    color: #ffffff;
38    font-weight: bold;
39    border-radius: 5px 5px 0 0;
40}
41.child p {
42    margin: 0; 
43    padding: 0;
44    font-size: 20px;
45    text-align:center;
46    line-height:100px;
47  　
48}
49.arrow{
50  color: #202F55;
51  font-weight: bold;
52  font-size: 30px;
53  text-align:center;
54  }
55
56</style>