如何删除页脚下方的这个白色 HTML 空间？

Question

I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.

One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page

And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/

Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.

Answer 1

I tried the given solutions from others to make sure none already did the trick on your page, but no success.

I then found the reason you're getting the issue. It's related to the:before of the news section, it's overflowing from the element.

Try adding this CSS:

#news {
    overflow: hidden;
}

Now the news section crops the:before element relative to its own dimensions. I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.

Answer 2

Add this line to top of your CSS file

* {
  padding:0;
  margin: 0;
}