Как выровнять логотип по центру изображения и выровнять по правому краю навигацию ul

Question

Логотип и навигация находятся в заголовке, и я бы хотел, чтобы логотип центрировался, когда навигация выровнена вправо.

Я пытался сделать display: block и margin: autoдля изображения, которое центрируется, но затем перемещает навигацию вниз к следующей строке.

Текущий css:

.logo {
    display: inline-block;
    width: 400px
    margin: 0 auto;
}

/* Navigation */

#nav {
    display: inline-block;
    margin: auto; 
    padding:0; 
    list-style:none;
    float: right;
}   

Прочитайте, что мне пришлось ввести ширину, чтобы сделать поле: авто работает, но все, что он делает, это увеличивает изображение.Спасибо.

Answer 1

Удалить float из вашего #nav и определить text-align:center для его родителя. Напишите так:

.header{
 text-align:center;
}
.logo {
    display: inline-block;
    width: 400px
}

/* Navigation */

#nav {
    display: inline-block;
    padding:0; 
    list-style:none;
    text-align:left;
}