A better alternative to overflow hidden

If you translate something off the side of the page, as we're doing now, it will cause the page to overflow and give us horizontal scrolling.

Traditionally, the solution to this was to have an overflow-x: hidden on the body, but there are potential side-effects in doing that.

Luckily, we have a better option now, with overflow-clip.

So while this would cause all sorts of problems:

.site-header {
  overflow-x: hidden;
}

This works like a charm:

.site-header {
  overflow-x: clip;
}