Firefox вопрос <img> размещения

Question

по следующему адресу: http://richtechgala.com/

логотип в заголовке должно быть по центру, и если вы на Chrome или Safari, вы увидите это. Однако, когда я иду на Firefox, изображение принудительно выходит за пределы заголовка, полностью покидая текущий видовой экран. Я не использую никаких специальных правил, которые требовали бы префиксов поставщиков ... что здесь происходит?

Это как логотип должен выглядеть, в настоящее время на Chrome:

Это то, что он выглядит на Firefox (я использовал 3d модель для лучшей визуализации):

Answer 1

Не уверен, что вы делаете это, но вы можете исправить это:

header { 
    text-align: center 
} 
header img { 
    display: inline-block; 
} 

Answer 2

Это связано с тем, что элементы вашего списка внутри первого навигатора плавают. Вы можете применить clearfix для него (https://css-tricks.com/snippets/css/clear-fix/), но я думаю, что лучше использовать встроенный блок, поскольку у меня есть ниже

Также вы должны скопировать/вставить код для упрощенной версии области заголовка вопроса, а не размещать ссылка

.universal li { 
    background-color: white; 
    box-sizing: border-box; 
    float: left; 
    height: 40px; 
    padding-top: 10px; 
    text-align: center; 
    width: 50%; 
} 

Так как они плывут, она берет их из нормального потока документа и его нужно очистить

вы можете установить элементы списка в display: inline-block вместо, но это потребует от вас убить пространство между каждым предметом

как так

<nav class="universal container-fluid"> 
    <ul> 
     <li> 
      ...     
     </li><li> 
      ... 
     </li>.... 
    </ul> 
</nav> 

вы также можете сделать

<nav class="universal container-fluid"> 
    <ul> 
     <li> 
      ...     
     </li><!-- 
     --><li> 
      ... 
     </li> 
    </ul> 
</nav> 

CSS

.universal li { 
    background-color: white; 
    box-sizing: border-box; 
    display: inline-block; 
    height: 40px; 
    padding-top: 10px; 
    text-align: center; 
    width: 50%; 
    vertical-align: top; 
} 

Также благодаря

.universal ul { 
    width: 100vw; 
} 

есть горизонтальная полоса прокрутки, удалить это правило, поскольку в этом нет необходимости

В качестве заключительной заметки я бы предложил вам скопировать и вставить код для вашей области заголовка в вопрос (отредактируйте его) и скопировать соответствующий css, чтобы он был больше полезно для будущих пользователей. Вы также можете настроить http://jsfiddle.net, что значительно облегчает отладку