Why is left style ignored?

Question

I have logo on page in the following code

<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>

I have added left attribute to logo style

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

this

left: 400px;

But it is ignored. Chrome Developer tools shows this style is active, but the image is displayed at the zero distance from left side of browser window.

Why?

Answer 1

In order for a left, top, bottom, right value to take effect, the item must be positioned.

Add either position: absolute or position: relative depending on your needs.

Absolute will position it relative to it's closest positioned parent.

Relative will position relative to itself.

Answer 2

you can either side the position:relative or set the left padding to be 400px

position:relative;
left: 400px;

or

padding-left:400px