Html Chrome不为居中而获取边距，在safari和firefox中工作

我有一个问题，谷歌Chrome没有在我的menuheader中选择左边和右边的边距来居中。我搜索过了，但似乎找不到有效的解决方案。它在Safari和Firefox中运行良好。有人能给我解释一下或者给我指出正确的方向吗？我希望有一个没有css黑客的解决方案

菜单是一个有5个元素的水平列表，第3个元素是我将放置徽标和标题的元素。我把这三个都放在一个span中，我给span加上一个bg图像和一个文本缩进。带有标题的span在所有浏览器中都显示得非常好，带有徽标的span只在safari en firefox中显示得很好，而在chrome中则没有。 我在加载样式表之前加载normalize.css

<!-- language: lang-html -->
<nav class="main-nav">
        <ul id="menu" class="main-nav-list">
          <li class="main-nav-item main-nav-hover"><a href="#pagesection" class="main-nav-link test" title="Over ons">Over ons</a></li>
          <li class="main-nav-item main-nav-hover"><a href="#pagesection" class="main-nav-link" title="Wat we doen">Wat we doen</a></li>
           <li class="main-nav-item">
            <div class="main-nav-home">
                <span class="main-nav-title">title</span>
                <span class="main-nav-subtitle">slogan</span>
                <span class="main-nav-logo">Logo</span>
              </div>
            </li>
          <li class="main-nav-item main-nav-hover"><a href="#pagesection" class="main-nav-link" title="Portfolio">Portfolio</a></li>
          <li class="main-nav-item main-nav-hover"><a href="#pagesection" class="main-nav-link" title="Contact">Contact</a></li>
        </ul>
    </nav>

<!-- language: css -->
nav {
    position: fixed;
    background-color: #000;
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom: 5px solid #333;
}
.main-nav {
    width: 100%;
}
.main-nav-list {
    position: relative;
    overflow: hidden;
    padding: 0;
    display: inline;
    margin: 0;
}
.main-nav-item {
    position: relative;
    display: block;
    list-style: none;
    float: left;
    text-align: center;
    width: 20%; /* fallback for non-calc() browsers */
    width: calc(100% / 5);
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.main-nav-home {
    position: relative;
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
.main-nav-title {
  text-decoration: none;
  display : block;
  color: #00ffff;
  font-size: 34px;
  font-family: 'trenchthin';
  text-align: center;
  color: #fff;
  width: 100%;
  margin-top: -1%;
  }
.main-nav-subtitle {
    text-decoration: none;
    display : block;
    color: #00ffff;
    font-size: 17px;
    font-family: 'nexa_lightregular';
    white-space: nowrap;
    width: 100%;
    margin-top: -3%;
    margin-left: -2px;
}
.main-nav-logo {
    display : block;
    text-indent: -9999px;
    z-index: 11;
    position: fixed;
    width: 20%;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    text-decoration: none;
    border: 0;
    padding : 0;
    background : url('../images/logo.png');
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-position: center;
}

标题
标语
标志




导航{
位置：固定；
背景色：#000；
宽度：100%；
高度：100px；
排名：0；
左：0；
z指数：10；
边框底部：5px实心#333；
}
.主导航{
宽度：100%；
}
.主导航列表{
位置：相对位置；
溢出：隐藏；
填充：0；
显示：内联；
保证金：0；
}
.主要导航项目{
位置：相对位置；
显示：块；
列表样式：无；
浮动：左；
文本对齐：居中；
宽度：20%；/*非-calc（）浏览器的回退*/
宽度：计算值（100%/5）；
高度：自动；
框大小：边框框；
保证金：0；
填充：0；
}
.主导航主页{
位置：相对位置；
宽度：100%；
高度：300px；
左边距：自动；
右边距：自动；
}
.主导航标题{
文字装饰：无；
显示：块；
颜色：#00ffff；
字体大小：34px；
字体系列：“trenchthin”；
文本对齐：居中；
颜色：#fff；
宽度：100%；
利润上限：-1%；
}
.主导航字幕{
文字装饰：无；
显示：块；
颜色：#00ffff；
字号：17px；
字体系列：“nexa_lightregular”；
空白：nowrap；
宽度：100%；
利润率最高：-3%；
左边距：-2px；
}
.主导航标志{
显示：块；
文本缩进：-9999px；
z指数：11；
位置：固定；
宽度：20%；
高度：100px；
左边距：自动；
右边距：自动；
颜色：#fff；
文字装饰：无；
边界：0；
填充：0；
背景：url（'../images/logo.png'）；
背景尺寸：100px 100px；
背景重复：无重复；
背景位置：中心；
}

您在

徽标上使用的CSS样式存在一些问题

您使用的是

position:fixed

，它会忽略左右自动边距

您可以通过将样式更改为以下方式进行修复：

.main-nav-logo {
  display : block;
  text-indent: -9999px;
  z-index: 11;
  position: fixed;
  left: 50%;
  width: 20%;
  height: 100px;
  margin-left: -10%; /* half of the width of the element */
  color: #fff;
  text-decoration: none;
  border: 0;
  padding : 0;
  background : url('../images/logo.png');
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: center;
}

通过添加

left:50%

和

left-margin:-10%

这是

宽度20%

的一半，您将使其居中

下面是一个示例，显示解决方案减去

文本缩进：-9999px以显示其居中位置

希望这能有所帮助。
在重新阅读我在stackoverflow上发布的问题后，我找到了答案！
我删除了标志跨度，我把背景添加到主导航主div中，现在一切都很完美

无论如何谢谢！：-）

解决了
 好的，我在考虑不改变标记，以防它是故意这样做的。很高兴你弄明白了。