謎の余白

flexboxって凄い便利ですよね。
細かい数値なんかを指定しなくてもいい感じに
キレイに並べてくれる素晴らしいものでお使いの方も
多いのではないかと思うんですけど今回こんな風にズレてしまって
少し困ったのでメモとして解決策を残しておきます。

空のclassを用意する。

いやもう本当にこれだけです。
どうも疑似要素::beforeを使用していたことが原因のようでした。
space-around等の別のもので指定しても謎の余白は消えなかったので
疑似要素とはあまり相性が良くないみたいですね。
当然ですが::afterでも結果は変わりませんでした。

そしてこちらが擬似要素ではなく空のクラスを用意したもの

右にあった謎の余白がキレイに消えてますね。
空のclassはできれば使いたくなかったんですけど
一応解決はしているのでしばらくはこれでいきたいと思います。