Почему этот стиль игнорируется?

Question

У меня есть логотип на странице в следующем коде

<h1 class="site-title"> 
    <a class="logo custom-logo" href="url" title="Go to Site"> 
     <img alt="Site" height="136" src="url" width="298"> 
    </a> 
</h1> 

Я добавил left атрибут logo стиль

.logo { 
    display: inline-block; 
    line-height: 1; 
    vertical-align: middle; 
} 

это

left: 400px; 

Но она игнорируется. Chrome Developer tools показывает, что этот стиль активен, но изображение отображается на нулевом расстоянии от левой части окна браузера.

Почему?

Answer 1

Для того чтобы значение left, top, bottom, right вступало в силу, элемент должен быть расположен.

Добавить position: absolute или position: relative в зависимости от ваших потребностей.

Absolute будет позиционировать его относительно ближайшего расположенного родителя.

Относительная позиция позиции относительно себя.

Answer 2

вы можете либо сторону положение: относительный или установить левый отступ быть 400px

position:relative; 
left: 400px; 

или

padding-left:400px