How can I center my logo on smartphone and tablet only?

I have created my portfolio for graphic design on the url sebastianpettersson.se. The theme I’m using is called Lekker by Code Interactive. I have searched their support forum but sadly not found any solution to this issue.

My issue is: I would like to have my logo horizontally centered when my visitors is viewing my page on smartphone or tablet. I’m somewhat a semi novice when it comes to css but tried using this code for it but it sadly does not work.

@media only screen and ( max-width: 993px ) {
    .qodef-header-logo-link
        text-align: center !important!;
    }
}

(Note that I’m also using a code to hide a button on smartphone and tablet but I’m pretty sure it’s not interfering with it). Posting it to incase that is causing an issue.

@media only screen and ( max-width: 993px ) {
    .qodef-m-lines{
        display:none !important;
    }
}

Any ideas or suggestions?

Solution

Set width100% and margin-right: auto; margin-left: auto;

@media only screen and ( max-width: 993px ) {
.qodef-mobile-header--minimal #qodef-page-mobile-header-inner .qodef-mobile-header-logo-link {
       margin-right: auto;
       margin-left: auto;
       width: 100%;
       max-width: 100%;
       min-width: 100%;
    }

}