Align <h1> with <nav> in Html5

could you help me please to adjust that lines?

I'm just trying to align ("LOGO") with ("ITEM 1 - ITEM 2 -ITEM 3") but I can't do it well. Do you know how can modify the css file in order to do it?

Here there is my code with the snippet:

body{
    margin: 0;
	padding: 0;
	background-color: gray;
}

main {
	margin: 0 auto;
	width: 80%;
	background-color: #FFFFFF;
}

#first-nav {
	background-color: #000;
	color: #FFF;
	padding: 6px 1em;
}

	#first-nav a {
		color: #FFF;
		padding-right: 1em;
	}
	
#second-nav {
	padding: 4px 1em;
	height: 100px;
}

	#second-nav h1 {
		font-size: 150%;
		display: inline-block;
	}
		
	#main-navigation {
		float: right;
	}

		#main-navigation a {
			color: #000;
			padding-left: 1em;
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<main>
			<section id="navigation">
				<nav id="first-nav">
					<a href="#">element 1</a>
					<a href="#">element 2</a>
					<a href="#">element 3</a>
				</nav>
				<section id="second-nav">
					<h1>LOGO</h1>
					<nav id="main-navigation">
						<a href="#">ITEM 1</a>
						<a href="#">ITEM 2</a>
						<a href="#">ITEM 3</a>
					</nav>
				</section>
			</section>
		</main>
	</body>
</html>

Thank you!

Solution

body{
  margin: 0;
  padding: 0;
  background-color: gray;
}

main {
  margin: 0 auto;
  width: 80%;
  background-color: #FFFFFF;
}

#first-nav {
  background-color: #000;
  color: #FFF;
  padding: 6px 1em;
}

#first-nav a {
  color: #FFF;
  padding-right: 1em;
}

#second-nav {
  padding: 4px 1em;
  height: 100px;
  text-align: justify;
}

#second-nav h1 {
  font-size: 150%;
}

#second-nav h1, #second-nav nav {
  display: inline-block;
  vertical-align: middle;
}

#second-nav:after {
  content: "";
  display: inline-block;
  width: 100%;
}

#main-navigation a {
  color: #000;
  padding-left: 1em;
}

<main>
  <section id="navigation">
    <nav id="first-nav">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
      <a href="#">element 3</a>
    </nav>
    <section id="second-nav">
      <h1>LOGO</h1>
      <nav id="main-navigation">
        <a href="#">ITEM 1</a>
        <a href="#">ITEM 2</a>
        <a href="#">ITEM 3</a>
      </nav>
    </section>
  </section>
</main>