[Help] CSS Mobile Query

Hi everyone, Im having an issue where I have media queries set up for my site which seem to work fine when resizing the browser, but dont seem to follow through to any mobile device correctly, the first issue is that the site width isn't 100% (which i know wont be explained from the code below and assuming is just a simple css fix but i cant understand why it wouldnt be 100%) , and the second issue is that it doesn't seem to recognize any of the queries on mobile when i make the changes.. 

below are the queries i am using, as i say all seem to work fine on browser, just cant seem to get it to work on mobile, viewport tag is in the head also..

an example can be found at finerfencing.co.uk 

@media only screen and (max-width: 1440px) {

h1 {color:#000}

}

@media only screen and (max-width: 1280px) {

h1 {color:#333}

}


@media only screen and (max-width: 840px) {

h1 {color:#555}

}



@media only screen and (max-width: 568px) {

h1 {color:#888}

}


@media only screen and (max-width: 480px) {

h1 {color:#fff}

}

Hope this is enough information and im posting in the right place, any advice would be welcomed, ive looked through google and the site for help but nothing i implement seems to make a change so im assuming im missing something really obvious!

Thanks,

Will