Как поставить логотип в центр блока чтобы лого выходило за рамки?

Question

[voproser]

https://codepen.io/anon/pen/PdXydK

чтобы получилось подобное

Answer 1

[Ankhena]

https://codepen.io/anon/pen/pOqqPN
с полями у картинки разберитесь, станет легче

Comments

[voproser]

Не могли бы подсказать зачем в данном в nav position relative и эти css:
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

[Ankhena]

voproser, relative тому относительно чего позиционировать абсолютный элемент.
А все остальное, чтобы встало по центру.
top и left сдвинут верхний левый угол, но это много, надо сдвинуть обратно на половину логотипа, для этого нужен трансформ. Можно обойтись calc, если знаем размеры логотипа.

[voproser]

Ankhena, а возможно обойтись средствами flexbox без использования:
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

?

[voproser]

Например почему я не могу через justify-content: center выравнивать?

[Ankhena]

voproser, можете, но тогда придется абсолютно позиционировать менюшку.

[voproser]

Если есть время и возможность, не могли бы Вы тоже самое сделать только по стандартам html5 через flexbox, а то у меня мне кажется полная помойка получилась. Просто интересно посмотреть на сравнение, хотелось бы сайт сделать идеально чистым (по другому не могу), а то везде уроки то на флексе, то по старой верстке, путаюсь где что использовать.

[Ankhena]

voproser, что-то из 2х надо позиционировать абсолютом. Логотип - логично. Меню - нет.

В вашем дизайне можно все это сотворить флексами. Но это неправильное и неуниверсальное решение.
Разбирайтесь: https://jsfiddle.net/n9cyatfr/

[voproser]

Спасибо вам большое. С вами можно как то еще связаться? а то вопросов много, не хочется засорять сайт глупыми вопросами)

[Ankhena]

voproser, Контакты в профиле.
Но правильнее задавать вопросы как раз на Тостере, он для этого и создан. Ответы пишутся теми у кого в данный момент есть время и желание отвечать.