Removing padding from Bootstrap theme "The Band" when viewed on mobile devices.

[brandin]

When viewing this theme on a mobile device, text is reduced to one word per line because of the following:

 

.container {
padding: 80px 120px;
}

 

My problem is that I'd like to keep this padding when viewed on a desktop/laptop, but it needs to be set to 0 when viewed on a phone. I've tried the following, with no results:

 

@media (max-width: 767px) {
.container {
padding: 0;
}

}

 

Any ideas? I'm new to CSS, btw. Any help would be greatly appreciated.

Edited November 15, 2015 by brandin

[dsonesuk]

It would have been a better option not to touch bootstraps responsive padding for .container element, but create your own custom div with a class to apply this padding instead within the .container element itself.