How can I place a logo on the same line as a flexbox navbar?

Question

Hello,

I have this situation:

.navigation{
  margin: 0; 
  display: flex;
  background-color: #6ab240;
  height: 64px;
  justify-content: center;
  align-items: center;
}

.navigation a {
  font-family: 'Roboto', sans-serif;
  color: white;
  text-decoration: none;
  padding: 20px;
}


/*Botão esta Certo*/
.botao-contato{
  background-color: #333366;
  color: white;
  border: none;
  font-size: 14px;
  padding: 10px 40px;
  border-radius: 8px;
  margin-left: 50px;
}

<header>
    <h1 class="logo"><img src="http://i.imgur.com/lo6IuZS.png" alt="Instituto Feira Livre"> </h1>
<nav>
        <ul class="navigation">
          <li><a href="#">O que é?</a></li>
          <li><a href="#">Como funciona?</a></li>
          <li><a href="#">Qual é a diferença?</a></li>
          <li><button class="botao-contato" type="button">Contato</button>
        </ul>
      </nav>
</header> 

That way the logo is above the navbar, how can I put the logo on the same line as the navbar? I didn’t put the logo inside ul because I want it to be as semantic as possible.

http://codepen.io/lrslima/pen/PpmyjK

Answer 1

Place content of h1 within the ul navigation.

<nav>
    <ul class="navigation">
      <li class="brand"><img src="http://placehold.it/50x50" alt="Instituto Feira Livre"></li>
      <li><a href="#">O que é?</a></li>
      <li><a href="#">Como funciona?</a></li>
      <li><a href="#">Qual é a diferença?</a></li>
      <li><button class="botao-contato" type="button">Contato</button>
    </ul>
  </nav>