Как сделать header?

Question

[Ivanushka255]

Делаю хэдер. Не получается сделать так, чтоб логотип был на одном уровне с меню. Либо логотип едет, либо меню

<header>
	    <div class="menu_block">
			<div class="logo">
				<img class="logo_img" src="img_new/logo.png" alt="">
			</div>
			<div class="menu">
				<ul>
					<li><a href="/about">about</a></li>
					<li><a href="/meeting">meet us</a></li>
					<li><a href="/gallery">gallery</a></li>
					<li><a href="/blog">blog</a></li>
				</ul>
			</div>
		</div>

header {
	width: 1680px;
	height: 100px;
	background-color: rgba(248, 248, 248, 0.1);
	display: flex;
}

.menu_block {
	padding-top: 22px;
	padding-bottom: 22px;
}			

.menu {
	color: #2f3c4d;
	font-family: Roboto;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
}

.menu li {
	margin-right: 50px;
	display: inline-block;

}

.logo_img {
	float: left;
	margin-right: 320px;
}

В чем ошибка? Заранее спасибо.

Answer 1

[WapSter]

.menu_block {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

А вообще лучше закинь код в песочницу.

Comments

[Ivanushka255]

Большое спасибо))) оказывается все просто, затупил

[Ivanushka255]

WapSter Только сейчас заметил justify-content: space-between. Для каких целей вы указали это свойство? Как я понимаю, его необязательно указывать (в своем коде я прописывал отступы)

[WapSter]

Ivanushka255, выдели его скопируй и введи в поиск. Узнаешь для чего оно нужно.

[Ivanushka255]

WapSter, я не в этом смысле, знаю для чего оно (распределяет расстояние "между")
Я имею в виду - чего ты хотел добиться, используя его (если маржины и падинги прописаны)?

[WapSter]

Ivanushka255, по этому я и дописал закидывать в песочницу, что и как его у тебя там прописано. Сделал то, что точно сработает. И к тому же как я сделал куда качественнее и проще адаптировать, чем margin-right: 320px;

[Ivanushka255]

WapSter, понял, спасибо)