Using CSS to remove padding/gutter for only mobile devices

I have this div column in a content row:

< div class=“col-md-4 no-gutter” style=“float: right;” >
< div class=“well” >
< p >IRB applications should be… (blah blah blah) < /p >
< /div >
< /div >

Screenshot of problem area

I am using a CMS (Cascade Server) with Bootstrap 2.

This worked to remove the gutter padding…

[class*=‘col-’].no-gutter {
padding-right:0;
padding-left:0;
}

…but upon looking at it in desktop view, I need some padding for screens over 992px wide so that the text doesn’t run up to the div column. I tried adding the following but I think my syntax is wrong and I don’t know how to fix it. Can someone help me?

@media screen and (min-width: 992px) and [class*=‘col-’].no-gutter {
padding-right:0;
padding-left:15;
}

@jojofromkokomo,
Have you tried a google search
== discussions / opinions ==
Using CSS to remove padding/gutter for only mobile devices 992 site:stackoverflow
http://stackoverflow.com/questions/19393264/why-does-bootstrap-3-force-the-container-width-to-certain-sizes

Yes, I have tried a google search. I have not been able to find what I was looking for, which is why I came here. I know that there is something wrong with the syntax of my CSS but I’ve tried at least 6 different variations and am at a loss. I am hoping someone smarter than me will be able to look at it and see where I went wrong. But thank you so much for your input.