<header id="header">
  <div class="row collapse align-middle">
    <div class="medium-2 column" id="logo">
      <a href="https://domain.com">Logo Text</a>
    </div>

    <div class="medium-10 nav-wrap column">
      <nav class="nav-container">
        <ul class="menu">
          <li><a href="/home">Hem</a></li>

          <li><a href="/contact/">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

#header {
  height: 100px;
  background: #f00;
    display: flex;
    > .row{
      padding: 0 20px; flex: auto;
    }

    .menu {
        justify-content: flex-end;
        display: flex;
        flex-wrap: wrap;
        li {
            flex: 0 1 auto;
            list-style: none;
            a {
                font-size: 16px;
                text-decoration: none;
            }
        }
    }
}