How to correctly position the logo, navigation and button in a horizontal menu?

Question

css

I am making a horizontal menu with three elements (logo, menu elements and a button). Can't get them to line up. They are stacked on top of each other, even though I'm using display: inline-block.
Please tell me what I'm doing wrong.
Menu link here .
Here is the code:

.nav-container {
  display: inline-block;
  z-index: 10;
}

.logo {
  display: inline-block;
  vertical-align: top;
  width: 173px;
  height: 51px;
  margin-top: 4px;
}

.menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

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

.btn-nav {
  display: inline-block;
  border: 1px solid;
  width: 160px;
  height: 45px;
  background-color: red;
  border-radius: 5px;
  vertical-align: top;

  text-align: center;
  font-size: 0.9em;
  color: #ffffff;
  padding-top: 12px;
  box-shadow: ;
}

I thought about float: left, but it seems to work without it.

Answer 1

https://codepen.io/topicstarter/pen/yGzRpB something like this, see

Answer 2

https://codepen.io/anon/pen/pqWBJd?editors=1100