Image seems to not be centring on Mobile Device

Question

I am trying to centre an image on my website - and it looks great when loading the page on a desktop computer, however on the mobile phone browser it appears like this

The css i am using to centre the image is as follows;

#logo
{
    max-width: 60%;
    min-width: 300px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto 
}


        <header>
            <img src="images/500x245.png" id="logo"</img>
            <h1>Welcome to AppCloud</h1>
        </header>

Can anyone suggest some alternative approaches as my way seems to be failing. Thanks

Answer 1

Decrease the min-width it will work perfectly

#logo{
    max-width: 60%;
    min-width: 300px; /** <<--- changes to be done here **/
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto 
}