Hide Side Menu On Mobile Devices

Hi,

I am currently using a responsive template for my website http://www.mypetstop.co.uk, however, the menus make is difficult to navigate on a mobile. I have tried using some of the code in the style.css file mentioned on other forums, however, it doesnt seem to work. Could some give me an idea of what I am doing wrong and how it should be structured. I have pasted the style.css content below:

Thank you

Theme Name: Roots
Theme URI: http://roots.io/
Description: Roots is a WordPress starter theme based on HTML5 Boilerplate & Bootstrap. Contribute on GitHub
Version: 6.5.2
Author: Ben Word
Author URI: http://benword.com/

License: MIT License
License URI: http://opensource.org/licenses/MIT

#masthead #mastnav ul li a {
1. color: #223387 !important;
2. font-family: ‘Gochi Hand’, cursive;
3. font-weight: 700;
4. font-size: 21px;
5. padding: 8px 16px;
6. text-transform: uppercase;
}