Mobile Safari white padding/margin on right

Question

I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/

When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.

In landscape view, this scrolling isn't there and it renders as I'd like it.

I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?

Answer 1

Just adding a border to some divs can cause the layout to change. Add this to the bottom of your css to find the rogue element:

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

I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/