Removing padding for mobile?


I’m trying to remove text padding when users view my Word Press website using a phone or tablet. I’m just interning as a marketer at a startup company and am completely new to coding. I just learned how to use padding to fix some of the spacing issues on the homepage.

I used padding for some of the photo captions (when right justified it sat in the margin rather than under the photo) as well as highlight paragraphs. It looks great on desktop but when viewed on a mobile browser it pushes the photo captions so they’re no longer right justified under photos, and the highlight paragraphs only display one or two words per line (I’ve removed the padding on these until I can come up with a solution). After researching a little on Google it appears I need to add a custom additional CSS code under Appearance > Customize > Additional CSS. I’ve tried a few different versions and this is last one I entered but it hasn’t changed the mobile view:

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

.site {
padding-left: 0px;
padding-right: 0px;

The website is

Any suggestions would be greatly appreciated! Thank you.