How to stop horizontal moving of the site design?

Is there a way to prevent the site layout to move out of the screen horizontal for all viewports?

as you can see here: the site can be moved out of the window http://testnl10.vini4all.nl/

I have had a similar problem. There is an element in your page that is wider than the page width.

I now have a js fragment I call which lists all the elements that are too wide.
I found the essence of it on stackoverflow (I think)

const checkOverflow = () => {
  var docWidth = document.documentElement.offsetWidth;
  console.log(`Document width is ${docWidth}`);
  [].forEach.call(
    document.querySelectorAll('*'),
    function (el) {
      if (el.offsetWidth > docWidth) {
        console.log(`tag: ${el.tagName}, id: ${el.id}, class: ${el.classList}, WIDTH: ${el.offsetWidth}`)
      }
    }
  )
}
export default checkOverflow

and in the js for a page (or all pages) I call

 import checkOverflow from 'Utilities/overflow'  //... or wherever you put it. 
...
domReady(
... do stuff to initialize the page...
checkOverflow()
)

Console messages like this may help you to identify elements which are wider than the document.

Document width is 465 
tag: SECTION, id: excerpts, class: , WIDTH: 1715 
tag: DIV, id: , class: marquee, WIDTH: 1667

best wishes

As soon as I scroll where the header is not visible, it stops being able to slide off screen. I’ve looked at the html/css. I don’t see what might be causing that, but suspect the answer is in the the header section somewhere.

Thanks for the feedback. I already solved it a bit the slider buttons where to far out of the screen-width. And as you mention there might be something in the header that is disturbing things. So further analysing then :slight_smile: