CSS skew looks weird.

I believe you just need to update the CSS to that below, making the container relative will allow the white line to be positioned as you wish.

.jumbotron-1 {
    background-color: black;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
}

An absolute element will work it's way up the parent containers looking for the next relative element to figure out where it should be positioned. In this case, it is picking up the body element and that's why it appears at the very bottom of the screen.

Hope this helps.

I'm not sure what you mean sorry, if you have a screenshot or link to something similar that you want to achieve I can try and help further.

So make the white line a thick black line, like below?:

.jumbotron-1::after }
content: '';
display: block;
width: 100%;
height: 100px; // adjust height to suit
position: absolute;
transform: skewY(-2deg);
background-color: #000; // adjust color to suit
bottom: -50px; //should be equal to half of whatever the height is set at 
}

Is that a screenshot from the browser and if so what browser? it looks OK to me in Chrome