Flexbox 要素の間隔が揃わない原因

上記の画像はFlexboxの学習中に課題として出てきたもので、li要素を横並びにするだけのタスクでしたが、単語の間隔が揃っていないことがどうしても気になって、自分なりにmarginを０にしたり、後から学習した「justify-content: space-between」を挿入してみましたが、解決しませんでした。なぜ間隔が１マスのものと２マスのもの（ピンクの部分）ができてしまうのでしょうか。間隔を完全に揃えるには、この場合どのようにしたら良いかご教示いただけるとありがたいです。

HTML

1<div class="container"> 2 <div> 3 <p>Page Layout Methods</p> 4 <li><a href="./html-table.html">HTML Table</a></li> 5 <li><a href="./inline-block.html">Inline-Block</li> 6 <li><a href="./absolute-position.html">Absolute Positioning</li> 7 <li><a href="./float.html">Float</li> 8 <li><a href="./flex.html">Flexbox</li> 9</div>

CSS

1p {2 padding: 0;3 margin: 0;4 font-weight: 700;5 }6 7 li {8 list-style: none;9 padding: 0%;10 margin: 0;11 }12 13 .container {14 padding: 10px;15 background-color: gold;16 display: flex;17 flex-direction: row;18 justify-content: space-between;19 }