First of all CodePen treat the HTML section as if it was the
body, so all this section can be removed/moved to the
head section (under settings - html)
<meta name="viewport" content"width=device-width, initial-scale=1.0">
<title>Peter's portfolio page</title>
<link href="https://fonts.googleapis.com/css?family=Caveat|Open-Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
Second what exactly do you mean with
creating a padding that scrolls all the way down?
The example page you gave has more content so you see the elements going below the view.
Plus s/he wrapped everything inside a bootstrap
If you want an element to be always at the bottom of the page a simple
in CSS will always place the element at the end of the page.
Hope it helps