html - Firefox doesn't like margin auto with flex box model -

html - Firefox doesn't like margin auto with flex box model -

i trying center header > section. works fine chrome , opera firefox force left side. created class called .body width: 960px , margin: 0 auto. doesn't recognize margin: 0 auto on firefox (i using firefox 18).

i have tried setting display value inline-block .body class. centers pushes nav bottom (for browsers).

this trying do

html

<header id="header"> <section class="body box"> <section class="flex1"> <a>mywebsitename</a> </section> <nav class="nav-list flex1"> <ul> <li> <a href="">login</a> </li> <li><a href="">register</a></li> <li><a href="">help</a></li> </ul> </nav> </section>

css

.box { display: -webkit-box; display: -moz-box; display: -o-box; display: box; -webkit-flex-direction: row; -mox-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; box-align: center; } .flex1 { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; } .body { clear: both; width: 960px; margin: 0 auto; } header { background: #0c2c52; box-shadow: 0 0 .2em .1em rgb(78, 76, 76); -webkit-box-shadow: 0 0 .2em .1em rgb(78, 76, 76); -moz-box-shadow: 0 0 .2em .1em rgb(78, 76, 76); margin-bottom: 1em; padding: 1em 0; } header > section { height: inherit; } #header section.flex1 { display: inline-block; } .nav-list {} .nav-list > ul { float: right; }

this bit alter margin: 0 auto;:

.box { display: -moz-box; }

it works fine if leave <section class="body">. jsfiddle example

html html5 css3 css