Выровнять по центру фиксированный блок?

Question

[svilkov87]

Всем привет!
Есть меню, у которого свойство position: fixed;
Проблема в том, что не применяются к этому блоку свойство margin: 0 auto;
Как выровнять блок navigation по центру экрана?

<div class="navigation">
    <ul id="mainMenu">
        <li class="menu_li" data-menuanchor="Page1" class="active"><a href="#Page1">First section</a></li>
        <li class="menu_li" data-menuanchor="Page2"><a href="#Page2">Second section</a></li>
        <li class="menu_li" data-menuanchor="Page3"><a href="#Page3">Third section</a></li>
        <li class="menu_li" data-menuanchor="Page4"><a href="#Page4">Fourth section</a></li>
    </ul>
</div>

body{
    font: 1em/1.6em sans-serif;
    color: #353535;
    background: #ccc;
}

/******меню******/
#mainMenu{
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu_li{
    display: inline-block;
    color: #fff;
}
.menu_li a{
    color: #fff;
    text-decoration: none;
}
.navigation{
    margin: 0 auto;
    text-align: center;
    height: 50px;
    position: fixed;
    z-index: 999;
}

Answer 1

[trushka]

margin: auto будет работать, только если заданы left, right, и width (или top, buttom и height)

Answer 2

[Милок Мурлыка]

попробуйте добавить это:

.navigation{
width: 100%;
}

https://jsfiddle.net/mmurlyka/8303mj0x/