Html 菜单栏中断到下一行/大小根据缩放级别而波动

这是我的浏览器上100%的菜单栏：

这就是在某些缩放级别和其他浏览器上发生的情况：

以下是关于小提琴的简化版本：

ol，ul{
列表样式：无外无；
}
#酒吧{
高度：50px；
左：0；
边缘顶部：8px；
位置：绝对位置；
宽度：100%；
}
#巴希尔{
文本对齐：居中；
}
#中心菜单{
高度：50px；
保证金：0自动；
宽度：954px；
}
#导航{
列表样式：无外无；
页边距底部：0；
边际上限：0；
填充顶部：0；
宽度：100%；
}
#李海军{
左边框：1px实心#0c4b89；
显示：块；
浮动：左；
高度：50px；
线高：50px；
填充顶部：0；
位置：相对位置；
z指数：500；
}
#李娜{
颜色：#FFFFFF；
显示：块；
字体大小：12px；
字体大小：粗体；
高度：50px；
左侧填充：18px；
右边填充：18px；
文本对齐：左对齐；
文字装饰：无；
文本阴影：0 1px 1px#000000；
}
#李：最后一个孩子{
右边框：1px实心#0C4B89；
}

我相信这是一件非常简单的事情，但我已经做了几天，尝试了很多不同的事情，包括多次尝试调整大小

那么，为什么最后一个元素会跳到下一个级别，但只是在不同的缩放下？当我调整它的大小以适应一个缩放级别时，它在另一个缩放级别中看起来完全不同。有没有办法让它始终填充954px#bar元素，无论缩放如何？

添加

White-space: nowrap

至导航

White-space: nowrap