Что не так с меню??

Question

[string001]

codepen.io/anon/pen/adYNpb?editors=1100

Что нет так с меню?? Проблема в том, что так показывает только у меня на компе, т.е в Хроме или Лисе , везде одинаково, а на codepen смотрится нормально.

Answer 1

[Алексей Струков]

Эти менюшки что то вытолкнуло вправо. Как будто они пытаются обтекать флоат элемент (видимо логотип). Логотипа в кодепене нет и поэтому все работает там. У логотипа надо убрать нижние маргины и подвигать его, чтоб он не касался менюшек (в хром дэв тулс можно увидеть на сколько его поднять надо)

Comments

[string001]

нет , этот лого вообще в отдельном контейнере)

[Алексей Струков]

string001: попробуйте на кодепен прописать url рабочий с логотипом

[string001]

Алексей Струков: Вы правы:) спасибо!

[string001]

нижние маргины у лого были лишние)

Answer 2

[Илья Панков]

Использовали normalize.css?
Дело в том, что codepen использует свои стили, поэтому ваш код может по-разному смотреться на разных устройствах и браузерах. Попробуйте подключить normalize.css

Comments

[string001]

попробовал, все равно не помогает

Answer 3

[Иван Гончаренко]

Я увидел грешок в позиционировании. Постарайтесь не увлекаться обтеканием float, есть более адекватные и работоспособные техники: flex-box, display:table (table-cell). Хотел прислать листинг кода, но не разобрался как сохранить проект, так что выкладываю лишь 3 класса которые можно просто заменить и все:

.header-logo {
height: 82px;
display:table;
width: 100%;
}

.header-logo .logo {
display:table-cell;
width:25%;
vertical-align:middle;
text-align:left;
padding-left:15px;
}

.header-logo .search {
display:table-cell;
vertical-align:middle;
width:50%;
}
.header-logo .basket {
display:table-cell;
width:25%;
vertical-align:middle;
text-align:right;
}

Должно получиться ;-)

P.S. HTML-ка не правилась. Там все ровно.