css - cssで画像を均等に配布しようとしています

Question

小さな画像のスライドを作成しようとしていますが、各スライドで画像が水平方向に均等に分散されています。css-tricks.com で興味深いテクニックと非常に単純な作業例を見つけましたが、それを複製することはできませんでした。

スライドのhtmlはこちら

<div class="item active">
  <div>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
  </div>
</div>

上記のテクニックに従ったCSSは次のとおりです

div.sites .carousel-inner .item div {
  font-size: 0.1px;
  text-align: justify;
}

div.sites .carousel-inner .item div:after {
  content: "";
  width: 100%;
  display: inline-block;
}

div.sites .carousel-inner .item div a {
  display: inline-block;
}

このサイトの下部にある「OTROS SITIOS」というタイトルで、コードの動作を確認できます。

編集: 私のガールフレンドは CodePenで私のコードを試しましたが、うまくいきました。干渉しているグローバルなスタイルに違いないと推測しています。

ご協力いただきありがとうございます