Removing header padding / nav margins on mobile view

My site had a large patch of white both above the header and above the green nav bar, effectively surrounding the banner. I got rid of these in normal view by adding the following code to CSS:

.header {
	padding: 0;
}

.nav {
	margin-top: 0;
}

However, the changes have not taken effect in mobile view. When I view the site on my phone, there are still large bars of white both above and below the banner image (screenshot):

https://weighted-glory.com/wp-content/uploads/2014/12/Screenshot_2014-12-04-20-44-32.png

Any suggestions on how to fix this on mobile view?

My site is https://www.weighted-glory.com. I am running the Adelle theme. Thank you in advance.