HTML/CSS: total page width is wider than content

Question

I have a strange problem, and 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.

Answer 1

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/