Why doesn't @media only screen css work with !IMPORTANT;?

the only time I can get the css @media to work is if I use !IMPORTANT; in the css like

@media only screen and (max-width: 600px)
.example {
    padding-left: 2px !IMPORTANT;
}

.example {
    width: 118px;
    position: absolute;
    padding-left: 21px;
    padding-top: 11px;
}

If I don't use !IMPORTANT in the @meda css, the style won't pick up, so the question is, why? I don't want to use !IMPORTANT; but the css @media won't work with it. Please help

It's working fine for me. Maybe you have another css as well for that class that overwrites it.

.example {
    width: 118px;
    position: absolute;
    padding-left: 21px;
    padding-top: 11px;
    background: red;
}

@media only screen and (max-width: 600px) {
  .example {
      padding-left: 2px;
      background: blue;
  }
}