Два блока объединились. Как исправить?

Question

[Владислав]

Нужно было использовать меню без float: left;. Пришлось использовать display: inline-block;. Но что-то они слились в один элемент. Как сделать так, чтобы они не были один на другом. Магия с clear?

Песочница

Заранее спасибо :)

Answer 1

[Aleksey Solovyev]

У Вас в строке 16 в css задана фиксированная ширина блока

.logo {
  background: #000;
  /* width: 42px; удалить*/ 
  height: 42px;
  display: inline-block;
  margin-top: 14px;
}

Comments

[Владислав]

Там просто вместо чёрного квадрата должно быть изображение, поэтому так

[Aleksey Solovyev]

Владислав, попробуйте добавить overflow: hidden для .logo. И будет понятно, что блоки ведут себя правильно(текст Focal выходит за рамки блока .logo)
https://jsfiddle.net/oL4btuhx/10/

Если Вам надо текст поверх фото в блоке .logo, то удаляйте width - https://jsfiddle.net/oL4btuhx/11/
Если надо текст отдельно от фото, то разделяйте на 2 блока - https://jsfiddle.net/oL4btuhx/12/ (или если нужно центровать по вертикали https://jsfiddle.net/oL4btuhx/14/ )
ps пытался сделать максимально не затрагивая Вашу разметку.

Ну а если говорить прямо, то Вам надо продумать лучше структуру header'а. Много лишнего в разметке + если будете что-то добавлять, то будет куча проблем. Посмотрите исходники популярных сайтов и делайте по аналогии.

Answer 2

[Bhudh]

.logo {
	background: #000;
	width: 42px;
	height: 42px;
	display: inline-block;
	margin-top: 14px;
	margin-right: 15ex; /* <-- Чтобы не сливались */
}

Answer 3

[Максим]

https://jsfiddle.net/lenskyuser/oL4btuhx/8/ - float
https://jsfiddle.net/lenskyuser/oL4btuhx/9/ --flex

Answer 4

[NaN]

1) уберите width, height в logo
2) добавьте новый блок logo__icon в icon и ему задавайте значения высоты и ширины и все остальное