I can not align the logo with the menu icon

Navigation
1

I'm not getting the logo with the icon menu, what can it be? 

/*
font-family: 'Oswald', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

/*reset*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*header*/
.header { 
	padding: 2px 0;
}
.header .container {
	display: flex;
	align-items: baseline;
}

.logo {
	margin-left: -15px;
}
.icon-menu {
	display: block;
	width: 40px;
	height: 40px;
	font-size: 25px;
	cursor: pointer;
	color: #3f4040;
	margin-left: auto;
}
/*menu*/
.nav {
	position: absolute;
	top: 95px;
	left: -100%;
	width: 100%;
	transition: all 0.4s;
}
.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav ul li a {
	font-family: 'Open Sans', sans-serif;
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #777;
	border-bottom: 1px solid #ccc;
}
.mostrar {
	left: 0;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sistemas de Informação - FAPAN</title>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald:300,400,700" rel="stylesheet">
	<link rel="stylesheet" href="assets/css/normalize.css">
	<link rel="stylesheet" href="assets/css/fapan.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head><body><headerclass="header">
		<class class="container">
			<h1 class="logo"><img src="assets/img/logo.png" alt="logo"></h1>
			<i class="fa fa-bars icon-menu" id="btn-menu"></i>
			<nav class="nav" id="nav">
				<ul>
					<li><a href="#">Sobre o Curso</a></li>
					<li><a href="#">Professores</a></li>
					<li><a href="#">Grade</a></li>
					<li><a href="#">Galeria</a></li>
					<li><a href="#">Alunos</a></li>
				</ul>
			</nav>
		</class>
	</header>
	<script src="assets/js/index.js"></script>
</body>
</html>
    
asked by anonymous 23.03.2017 / 14:37

1 answer

0

The first thing you need to understand is how elements are organized in the browser, there are various forms and techniques for alignment.

I'll show an example with display: table : 

<header class="header">
   <div class="col">
     <h1 class="logo">logo</h1>
   </div>
   <div class="col icone">  
     <i class="fa fa-bars icon-menu" id="btn-menu"></i>
   </div>
</header>

.header{
  display: table;
  width: 100%;
}

.col{
  display: table-cell;
  vertical-align: middle;
}

.col.icone{
  text-align: right;
}

Note in this example that the person in charge of aligning the elements horizontally is the column display: table-cell with vertical-align: middle

In your case you are using display: flex which facilitates a little .. to solve I practically needed to use align-items: baseline; align-items: center; see: 

/*
font-family: 'Oswald', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

/*reset*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*header*/
.header .container {
	display: flex;
	align-items: baseline;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 10px;
  background-color: #ddd;
}

.logo {
  display: inline-block;
}
.icon-menu {
	display: inline-block;
	font-size: 25px;
	cursor: pointer;
	color: #3f4040;
	margin-left: auto;
}
/*menu*/
.nav {
	position: absolute;
	top: 95px;
	left: -100%;
	width: 100%;
	transition: all 0.4s;
}
.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav ul li a {
	font-family: 'Open Sans', sans-serif;
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #777;
	border-bottom: 1px solid #ccc;
}
.mostrar {
	left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<header class="header">
  <div class="container">
    <h1 class="logo">
      <img src="assets/img/logo.png" alt="logo">
    </h1>
    <i class="fa fa-bars icon-menu" id="btn-menu"></i>
    <nav class="nav" id="nav">
      <ul>
        <li><a href="#">Sobre o Curso</a></li>
        <li><a href="#">Professores</a></li>
        <li><a href="#">Grade</a></li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Alunos</a></li>
      </ul>
    </nav>
  </div>
</header>
    
24.03.2017 / 15:45
How to block files by extension in SVN Configuration of fixture mocker in pytest-mock