Centering content between 710px and 909px?

I’ve been trying for an hour or so to do this but no joy, I’d be grateful for any pointers!

I have a site in development at http://consciouswebdesign.co.uk/bromley/ with a child theme (although the same happens on the vanilla version of twentysixteen).

When the screen width drops to 909px (and the sidebar goes to the bottom) the content maintains right hand padding of 23.0769% until the screen width is 710px, below which the padding becomes even and the content is centered.

There is probably a reason why it has been designed like this, but on a tablet in portrait it looks a bit odd.

I’ve tried:

@media screen and (min-device-width: 710px) and (max-device-width: 909px) {
.entry-header, .entry-summary, .entry-content, .entry-footer, .page-content {
margin-right: 7.6923%;
}

but something (that I can’t identify) overrides it so it doesn’t work.

Any help would be great.

Thanks in advance