Problem with responsiveness with right sidebar

I’m having trouble with the tempera theme responsiveness – it affects viewing on a mobile phone and on a desktop when I reduce the size of the browser window.

My layout is content with one sidebar on the right. If I reduce the browser window width, everything is fine until the right sidebar drops beneath the content – it’s below, but right justified which means that there’s a lot of white space to the right of the content.

As I reduce screen width further, the white space stays so the content width is always half the screen width. This looks bad enough on a desktop, but on a mobile it means that only a few letters of the content can be seen before it wraps to the line below. (For now, I’ve activated the Jetpack mobile theme module so it looks OK on a phone, but ideally I’d like to disable this and use the theme’s responsiveness – as well it working properly on the desktop version!)

I’m running a child-theme (with no modified CSS or anything), though the same problem remains if I just use the main tempera theme.

Something a little odd is that when in wp-admin and I click on appearance / header and I see a preview of the site – then everything works fine – the right side bar moves directly under the content and there is no white space to the right of the content…

I’ve tried uninstalling and reinstalling the theme, clearing the W3 cache and browser history (Chrome and Mozilla) , or using only one widget on the sidebar – but the problem remains 🙁

My site is:

http://www.time2timetravel.com

Anyone have any ideas what is going on and how I can get this sorted?

With many thanks, Paul