Изменение размера логотипа для мобильного

Question

У меня есть этот код, который централизует логотип на экранах рабочего стола:

.navbar .navbar-header .navbar-brand 
img {
     display: block;
  margin-left: 200%;
  margin-right: auto;
  margin-top: 50%;
}

На мобильных экранах логотип просто исчезает. Я попробовал приведенный ниже код, чтобы остановить его, но он не работает:

@media only screen and (min-width: 200px) and (max-width: 670px) {
   .site-branding img {
      max-width:100px;
      max-height:56px; 
   }
   .main-header {
      height:80px;
   }
}

Логотип должен быть централизованным на настольных и мобильных устройствах.