How do I fix random <hr> / margins / paddings on wordpress page

Question

I'm using elementor PRO to edit my wordpress website and I can seem to find a fix for these random lines / box overlay or whatever it is at the top or bottom of my page...

Here are some pictures that might help you understand the issue a bit better, thanks beforehand.

Top of the page Bottom of the page

I tried to put on the css code the following code:

hr{
  margin: 0;
  padding: 0;
  visibility: hidden;
  display: none;
}

And still had no success at all in solving this problem.

https://dev-fivemfuel.pantheonsite.io/elementor-223

Here is the site URL so you can review the problem as well.

Answer 1

Thanks for sharing the link to the website, that was super helpful, Unfortunately, I cannot tell you why the website behaves the way it does but I found a quick fix for the problem: The issue seems to be the header and you can remove the extra space including the lines by using this custom CSS:

 div#header, hr { display: none; }

It's certainly not the cleanest way to fix this problem but it should solve your problem. :)