CodePen与本地运行输出不一致，CSS新手求解释原因

我怀疑这可能是CodePen对代码的解析方式导致的问题，作为CSS新手，希望能得到相关解释。

我在CodePen上运行了一段代码，输出效果如图：

随后我将相同代码在本地运行，输出效果如图：

我只是创建了新Pen并将本地文件代码复制到CodePen在线编辑器中，为何会出现这种情况？这是CodePen的正常表现吗？

另外，原代码来自CodePen，在CodePen上显示正常，但将其复制到本地运行时，布局又出现错乱。我对此感到困惑，寻求帮助。

注：下方代码片段为满足发帖要求添加，请忽略

body {
  color: #181ce9;
  font: 300 18px/1.6 "Source Sans Pro", sans-serif;
  margin: 0;
  padding: 5em 0 2em;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者Jay