Mobile Menu wrapping issue

I’ve got an issue where my standard menu is wrapping before the mobile menu shows up and it’s going on top of the content. I’d like to make some changes to when it occurs and I have the following Custom CSS
#main-nav li.megamenu ul li a { font-weight:normal; color: #fff; }
@media handheld,only screen and (max-width:720px){
#logo img { max-width: 130px !important; }
}
I have changed the max width to 720 (it was at 620), but I don’t think that’s changing it because this CSS is for mobile devices only. How do I change it so that the mobile menu appears sooner on a desktop browser, when it’s made smaller.

http://yourchiro.ca/

Thanks for your help!