I've transferred the code from CodePen to Atom and saved it. Even though I have added the jQuery script and linked the stylesheets correctly, my local page is still displaying differently.
Codepen - http://codepen.io/jordan_miguel/pen/gLwJRb
Browser view
https://i.stack.imgur.com/k1jek.png
This is the error in my console
https://i.stack.imgur.com/JaOM5.png
Folder structurehttps://i.stack.imgur.com/ocW1I.png
Html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main id="main">
<nav class="nav">
...
CSS
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
h1, h2, h3, h4, h5, h6 {
...
JS
$(document).ready(function(){
$('.nav-item').click(function(){
...
});
});