HTML/CSS: total page width is wider than content

I have a strange problem, an开发者_开发技巧d I can't find the cause! I have the following webpage: http://uk.translation-vocabulary.com/de-german and the perceived width of the page is perhaps 300px greater than the width of the content. So a horizontal scrollbar is present even when the viewport is horizontally stretched to match the visible content.

I have been inspecting elements with Firebug, trying to find the culprit. No success so far.

This effect observed in Firefox, Safari, Chrome. Untested: IE.

Any help greatly appreciated!

Benjamin.

Two ways to diagnose the culprit.

Method A

1. Open the Chrome dev tools in the Elements tab.
2. Expand all elements under HTML by hovering over the triangle on the left, then Ctrl+Alt click (Windows) or Option click (Mac).
3. Hover your mouse over each element and see if it highlights inside the area on the webpage making it too wide.

Method B

1. Open the Chrome dev tools then hit Esc to open the console.

2. Paste in this code and hit Enter.

   var docWidth = document.documentElement.offsetWidth;
   [].forEach.call(
     document.querySelectorAll('*'),
     function(el) {
       if (el.offsetWidth > docWidth) {
         console.log(el);
       }
     }
   );
   

This will find all the elements in the page overhanging. Thanks to Chris Coyier https://css-tricks.com/findingfixing-unintended-body-overflow/

Your facebook button is causing this problem (removing the button makes the problem go away).

The facebook iframe has its width set to 575px via the style attribute, which is causing the page to be wider than 100%.

Note that you can add the CSS rule html,body{overflow-x: hidden;} to mask the problem, but instead, you should really fix that button.