How to Find Ghost CSS Elements

David Ojeda - May 11 '18 -

I recently came across a bug on our landing page which caused a weird blank space overflow on the right side:

I looked for a couple of hours trying to find any CSS spacing causing it, or some wrong element on my HTML, but couldn't find anything out of place. The blank space wasn't even inside the <html> element of the page 🧐

I then stumbled upon this post and rapidly found the problem. This blog post suggests some CSS styles to make ghost elements visible 👻:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

Now, I could find the section that was causing the problem:

In the end, it was a matter of fixing some mismatching HTML elements.

Would've had this CSS styles helping me debug from the beginning, could've saved me a couple hours of work 🤦🏻‍♂️