Codepen CSS在部署到Project或Surge时未对齐

我这里有一个Codepen,可以像一支笔一样工作。

https://codepen.io/Teeke/pen/jObBBrO

当我将其移至Codepen项目或进行大量部署时,CSS会部分损坏。居中的文本向左移动。我的头中包括CSS规范化脚本和其他库

.top-bar.scrollNav {
  background: #ffffff;
  opacity: 0.92;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-bottom: 1px solid rgba(200, 200, 200, 0.8);
}
.top-bar.scrollNav .menu li, .top-bar.scrollNav .menu li a {
color: #555;
  }

部署时笔未对准:

https://i.imgur.com/CA7dt5X.png

它应该看起来像这样(以文本为中心):

https://i.imgur.com/ID3kXnU.png

是什么导致CSS在Codepen项目或Surge中未对齐?

Codepen项目,如果有人感兴趣:

https://codepen.io/Teeke/project/editor/ZnwVdJ#0

评论