On mobile, my site has empty space on the right

This is an overflow issue.

Overflow can be visible or hidden in both directions together or addressed singularly.
To avoid an horizontal “scrolling” you might add a overflow:hidden to the body element of your site.

However it would be much better to discover why you have an horizontal overflow in the first place.

This can be due to anything, usually some overly wide element is “expanding” over your body (not your body, sorry the wording, over the websites body), and thus creating the annoying horizontal scroll on narrow screens.

This can be a title without word break, an image too wide, or even hidden elements.
The best way to find the overflow is to analyse the HTML code in a Browser Inspector and find the element that overflows and instead of adding an overflow hidden rule, fix that overflowing element.

Sometimes this can be quite hard to find.
If you can’t find it by analysing the source in a browser inspector you can try to add this code to the Console of the browser inspector:

var docWidth = document.documentElement.offsetWidth;

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

It will log the element with overflow (if any).

Thanks, @bedas . I can see you really know your stuff. I’m an absolute beginner so that wasn’t easy for me to understand.
Can you explain what I would do exactly to achieve the below? I tried adding it in Appearance > Customise > Additional CSS but it didn’t do anything.

“add a overflow:hidden to the body element of your site”

You could try
body{overflow-x: hidden;}
in the customizer css area

But as said that’d just “hide” the real issue which is that some element overflows unexpectedly the viewport width.

Note that the overflow-x rule might not do anything if the overflow is from some element that isn’t “child” of body itself.
In that case it’s really required to debug the html source and find the culprit to eliminate it.

I hope this helps!

• This reply was modified 3 years, 6 months ago by Anonymous User 14808221.

Thanks again, @bedas
I tried uploading a new header image and it’s much much better now, so that’s good enough for me. I don’t understand it because the new header is not very different, but I won’t question it too much! Just glad it’s (pretty much) fixed.

That’s Great!

I found that this seems due to an Elementor Widget that has a negative margin of -199.
When I remove that style it works perfectly.

You may want to look at the Elementor Templates you use there, and check for negative margins,

Note that Elementor has a mobile preview/development mode, so that could help further to narrow down such issues quickly.

It seems some rule that you have added within elementor in mobile mode, so when you enable that mode while developing the template, will help you find the “wrong” setting as well.

If with this your question has been answered, we would love if you would mark this topic as resolved in the sidebar. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did.

Otherwise, feel free to follow up here, or, eventually inquiring in the Elementor Support Forum can help too, since the folks there will have much more experience with the plugin than I do (I usually don’t use Page Builders).
Someone experienced with the tool might even be able to tell you precisely what setting to change.

• This reply was modified 3 years, 6 months ago by Anonymous User 14808221.