No, I wasn't using 980px for the mobile as I have media queries set for min width = 320 and max width = 480 and other media queries set for other devices
If you don't have the viewport meta tag in place then mobiles will not take any notice of your smaller width media queries because they will assume the page is 980px width (no matter what you have set it) and then scale it to fit the small device.
You need to add the viewport meta tag for proper responsive web design:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now mobiles will not scale the page but obey the rules that you have set for width in your media queries. For these devices you would remove any physical widths as such (like your 62.5em wrapper) and usually let the elements be auto width so that they fill the smaller screen and then you adjust your elements to fit in the smaller screen (e.g. reducing 3 columns into one column and so on..)
Only to find that the width of the page is smaller than the 1000px equivalent that I want i.e. approximately 875px
How do you know the element is 875px wide? It's not possible to tell that on a mobile with any accuracy or are you talking about on desktop.
You also need to remove margins and padding from html and body or your element will be smaller still on mobiles.
If you haven't got a live version for us to see yet then perhaps a few screenshots would clarify the situation as I feel we may be talking at cross purposes here