css - リスト アイテムのサムがこのように表示されるのはなぜですか?

Question

ちょっと私はいくつかのブレークポイントを設定し、リスト項目をパーセンテージで設定しました。それはさまざまなブレークポイントにうまく適合します。

しかし、私が設定していないデフォルトのものはこのように表示されます。

ここに私のサスコードがあります。

li
        {


            width:20%;
            padding: 2px;
            float:left;
                          @include media($xl-desktop) { // As defined in _grid-settings.scss
                            width:10%;
                          }

                          @include media($mobile) { // As defined in _grid-settings.scss
                            width:33.3333%;
                          }
                        }

どこが間違っているのか教えてください。ありがとう。ここに私のデモデモ リンクがあります