CodePen Output Differs From Local Output-CodePudding

I feel like this could be a possible issue with how CodePen interprets things. I am new to CSS, so, would appreciate any explanations.

I have code running on CodePen.

Now, that code, I also run locally. that code is available here.

All I did was create a new Pen, copy pasted the code from the local files to the online codepen editor.

Why would this happen? is this normal CodePen behavior that I should simply anticipate?

Further, The original code is available here, https://codepen.io/giana/pen/GJMBEv. That looks just fine, and oddly enough, when I copy paste this codepen code to run locally, the layout gets screw up again.

So, I am just confused. And, I am new to CSS.

Adding some lines of code, because, the editor won't let me post without some lines of code.Please ignore this below code snippet.

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

CodePudding user response：

I find that the normalize.css is the main reason why your CodePen won't work. Take note that CSS will make the last line for the main style. In CodePen CSS will always take the style on the top. And this normalize CSS is under the CSS Codepen style, different from your local that the normalize CSS is on top of your style.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">