Centered Logo on Mobile

Hello,

I thought this was fixed (see this https://kriesi.at/support/topic/centered-large-logo-not-working-on-mobile/#post-451376) but when I fixed the mobile with this code:
.responsive .logo img { margin-left: 20%; }

It broke on the desktop view. The log shifted to the right and was then cut off.
Here is the entire Quick CSS code as it is now.
/* positions menu -secondary*/
nav.sub_menu {
left: -30% !important;
position: relative;
}
/* Centers logo and leaves it bigger size*/
.html_header_top.html_logo_center .logo {
left: 28%;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
@media only screen and (min-width: 990px) {
#header_main>.container {
padding: 0px;
top: -215px;
}}
.inner-container {
top: 210px;
}
/* Font size of body*/
body {
font-size: 15px;
}
/* Turns off the auto capitalization*/
h1,h2,h4,h5,h6{
text-transform: none !important;
}
/* Header displaying correctly on Tablets*/
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .mobile_menu_tablet .main_menu {
display: block;
}
.main_menu {
margin-right: -30px;
}
.main_menu ul:first-child > li > a {
font-size: 10px;
}
.logo img {
width: 250px !important;
}
}