CSS works differently on certain pages, difference disappears when using development tools

I have a weird one: on my site http://tustincommercial.com some pages are aligned slightly differently from others, giving a jumping effect.

Compare http://tustincommercial.com vs http://tustincommercial.com/who-we-are to see the effect.

The markup is identical, apart from the content in the middle. Th开发者_开发技巧e same CSS is being applied.

Now, the real killer is that this difference disappears when developer tools are open. All browsers (IE8, Chrome, Safari, Firefox, Opera) show the difference when developer tools are not open. None of them show the difference when their developer tools are open.

Any ideas on the best way to find and fix the source of the difference?

The issue comes from the scrollbar appearing when your content goes past the bottom of the window. When the developer tools are open all pages need to scroll, so the jump disappears.

There are a few ways to fix this, but I currently can't tell you what would be best for your site. You could make it fixed width, you could try using max-width, or you could force the scroll bar to always be present:

html {
overflow-y: scroll;
}