Codepen CSS смещается при развертывании в Project или Surge

Question

У меня есть 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

Answer 1

Вы загружаете свои CSS неправильно:

<script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css"></script>

Это должно быть:

 <link rel="stylesheet" type="text/css" href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" >