html - Foundation フレームワークを使用してメニュー項目の幅を縮小する方法

Question

Foundation フレームワークを使用してメニューを作成してきましたが、各メニュー項目の幅が広いことに気付きました (ホーム タブにカーソルを合わせると、このように表示されます)。

この間隔を減らす方法はありますか？パディングを使用してみましたが、役に立ちませんでした。Foundation の CSS ファイルを変更する必要がありますか? （私はSASSに慣れています）。

ここに私が持っているものがあります:

<nav class="top-bar">
                    <section class="top-bar-section">
                        <ul>
                            <li><a href="#">home</a></li>
                            <li><a href="#">about</a></li>
                            <li><a href="#">volunteer</a></li>
                        </ul>
                    </section>
                </nav>

CSS:

.top-bar {
     height: 125px;
     font-family: ProximaNova;
     font-size: 16px;
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#f0f0f0));
     background-image: -webkit-linear-gradient(top, white, #f0f0f0);
     background-image: -moz-linear-gradient(top, white, #f0f0f0);
     background-image: -ms-linear-gradient(top, white, #f0f0f0);
     background-image: -o-linear-gradient(top, white, #f0f0f0);
}
.top-bar ul li a {
     padding-left: 0px;
     padding-right: 0px;
}

サイトはこちら: http://mvcsf.com/new/ ありがとうございます!