html - div の両側に同じパディングを設定する方法。CSS

Question

私はこの要素を持っています:

<div class="menubar">
    <a href="http://home.com"><img src="../img/home_button.png"/></a>
    <a href="http://home.com/a"><img src="../img/a_button.png"/></a>
    <a href="http://home.com/b"><img src="../img/b_button.png"/></a>
    <a href="http://home.com/c"><img src="../img/c_button.png"/></a>
</div>

私の目標は、メニューバー div のコンテンツを中央に配置することです。

を使用してdisplay: table;それをmargin:auto;達成しますが、私が使用している背景画像は、div のコンテンツのみに合うようにトリミングされています。

.menubar {
    display: table;
    margin: auto;
    background-image:url(/img/menubar_background.png);
}

それで、両側に 50% のパディングを追加するこの別のバージョンがありますが、問題は、結果の合計幅が 100% + ボタンの幅になることです。

.menubar {
    padding-right:50%;
    padding-left:50%;
    background-image:url(/img/menubar_background.png);
}

(100%)を使用してより近いものを達成しましmax-width:960pxたが、まだ問題があります。実際には、両側に同じ量のパディングが適用されません。最終的に左に 50% パディングし、残りは右に 960px に達します。

どんな助けでも大歓迎です！