Html 如何在div.CSS的两侧具有相等的填充

我有这个元素：

<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>

然后，我有另一个版本，它在两边都添加了50%的填充，但问题是结果的总宽度是100%+按钮的宽度

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

我通过使用

max width:960px

（100%）实现了更接近的效果，但仍然存在一个问题：它实际上没有在两侧应用相同的填充量。它最后在左边填充50%，在右边填充960px

---

欢迎任何帮助

改用文本对齐

.menubar {
  text-align:center;
  background-image:url(/img/menubar_background.png);
}

---

如果知道元素的宽度，可以使用

calc

：

.menubar{
--菜单宽度：112px；
宽度：var（--菜单宽度）；
左侧填充：计算（（100%-var（--菜单宽度））/2）；
右边填充：计算（（100%-var（--菜单宽度））/2）；
颜色：#4fff09；
背景：灰色；
}

菜单栏内容

.menubar {
  text-align:center;
  background-image:url(/img/menubar_background.png);
}