Why does my background stretch to the edges on the top of the page, but not on the bottom?

I'm working to edit the background at the bottom of my webpage and noticed a white border around the background that does not mirror the top portion of the webpage.

I've attempted the usual solution of including top: 0; and right: 0; I've also included background-size: cover, but that has not fixed the issue either.

Here is my CodePen so you can view the HTML and CSS. Note, I'm writing my CSS in SASS, so its a bit long.

I expect the lower background (which transitions from the dark purple to the dark pink) to stretch all the way to the edges, a la the upper background (dark pink to blue), but it instead has a weird white border around it.