Issue with portfolio page padding


I’m having difficulty creating a padding that scrolls all the way down. I have tried to do it but I can’t seem to get it right.
An example of what I’m trying to recreate:

The portfolio page that I’m working on can be found here:

Should I maybe use some of the bootstrap template at all.

Thanks in advance for any assistance.

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)

<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content"width=device-width, initial-scale=1.0">
<title>Peter's portfolio page</title>
<link href="|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 row.

If you want an element to be always at the bottom of the page a simple

position: fixed;
bottom: 0;

in CSS will always place the element at the end of the page.

Hope it helps :slight_smile:

we’re just going to guess what this means til you rephrase this (:
am guessing that what you want is for the <div class="sample-projects"></div> to hit the bottom of the screen, you can do that by removing

.sample-projects {margin: 100px;}