Why is my mobile responsive css not working?

Question

for a particular div, I'm trying to have padding-left:10%; for desktops and padding-left:0; for mobiles. However, the code below doesn't seem to work. Hope you can help. Thank you.

CSS Code:

    @media (max-width:960px) {
        #tdpadding { padding-left:0%; }
    }
    
    @media (min-width:961px) {
    #tdpadding { padding-left:10%; }
    }

Inline Code:

    <div class="tdpadding">
    some text here
    </div>

Answer 1

change it into .tdpadding { padding-left:0%; }