Почему объект не позиционируется посередине?

Question

[patashok]

Вот HTML:

<header class="header">
            <div class="top-line">
                <div class="items">
                    <div class="left-item clearfix">
                        <img src="images/icon_here.png" alt="" class="left-item-icon">
                        <div class="moscow">
                            Москва
                        </div>
                        <div class="address">
                            ул. Верейская, 29 стр. 35
                        </div>
                    </div>
                    <img src="images/logo.png" alt="" class="logo">
                </div>
            </div>
        </header>

Вот CSS:

* {
    margin: 0;
    padding: 0;
}
.clearfix:after {
    content: '';
    display: table;
    width: 100%;
    clear: both;
}
.header {
    height: 700px;
    background: url(../images/header_bg.jpg) no-repeat center top / cover;
}
.top-line {
    background: rgba(0,0,0,.75)
}
.items {
    width: 1110px;
    margin: 0 auto;
}
.left-item-icon {
    float: left;
    margin: 5px 16px 0 0;
}
.moscow {
    color: #d12f22;
    font-size: 32px;
    text-transform: uppercase;
    font-family: 'BebasBold';
    margin: 0 0 -5px 0;
}
.address {
    display: inline;
    color: #fff;
    font-size: 22px;
    border-bottom: .5px solid #fff;
    text-transform: uppercase;
    font-family: 'BebasRegular';
}
.logo {
    position: absolute;
    top: 0;
    left: 50%;
}

Картинка с классом logo не позиционируется посередине, она позиционируется ближе к правому краю. Когда пишу margin: 0 auto; тоже самое. Помогите пожалуйста, несколько часов вожусь уже.

Answer 1

[archelon]

Есть несколько способов выровнять элемент по центру.
Если оставить как сейчас:

.logo {
    position: absolute;
    top: 0;
    left: 50%;
}

то добавьте margin-left: -Npx;, где N = половина ширины изображения.

Answer 2

[Stalker_RED]

left: 50%; выравняет левый край логотипа по центру. Сам логотип при этом будет правее.
Можно добавить transform: translateX(-50%), чтобы сдвинуть логотип влево на половину его ширины.

А чтобы трюк с margin: 0 auto работал, нужно убрать position: absolute.