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

Вот 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; тоже самое. Помогите пожалуйста, несколько часов вожусь уже.