Tailwind !important overwrite

I am trying to set a specific margin when it comes to screen size. When using mx-auto it does what I want it to do at first. Starting off with that for smaller screens.

As my user-screen gets bigger, I want the margin to only be 2px instead of auto

This is my code below for my element.

<img    src={'https://i.ibb.co/SnDDJ99/45219372-2219308534767966-7383583342043594752-n.jpg'}
   alt='Oscar Self Portriat'
    className=" h-full
                w-6/12
                rounded-xl


                md:w-4/12
                md:ml-4"
/>

but when the screen gets wider, mx-auto is still prioritized over my md:ml-4 is there any reason why? How can I make sure mx-auto only works for smaller screens and breaks off after md.