Bulma: Container as direct child of navbar moves navbar-menu below navbar-brand

[czamp]

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.4.3]

My browser is: Chrome Version 59.0.3071.115 (Official Build) (64-bit), Firefox 54.0.1 (64-bit)

I am sure this issue is not a duplicate

Description

Placing container as a direct child of navbar and the parent of navbar-brand and navbar-menu causes navbar-menu to appear below navbar-brand.

Steps to Reproduce

See Codepen

No Container

<nav class="navbar">
    <div class="navbar-brand">
        ...
    </div>
    <div class="navbar-menu">
        ...
    </div>
</nav>

---

Container

<nav class="navbar">
    <div class="container">
        <div class="navbar-brand">
            ...
        </div>
        <div class="navbar-menu">
          ...
        </div>
    </div>
</nav>

---

Container is-fluid

<nav class="navbar">
    <div class="container is-fluid">
        <div class="navbar-brand">
            ...
        </div>
        <div class="navbar-menu">
          ...
        </div>
    </div>
</nav>

Expected behavior

navbar-brand and navbar-menu are displayed left to right in a container

Actual behavior

navbar-menu is displayed below navbar-brand in a container

[koddr]

+1 after update bulma to 0.4.3 version .container in <nav> behaves strangely.

[lent]

maybe nav.navbar>.container needs another display: flex?

[VizuaaLOG]

The navbar on the docs puts the container on the outside. Maybe the navbar no longer supports a container inside?

<div class="container">
    <nav class="navbar">
        ...
    </nav>
</div>

[rafaelpimpa]

Using display: flex on the .container will have the mobile menu button to keep on the left side.
Adding the .container to the .navbar itself works good apparently:

<header class="navbar container"></header>

[almasaeed2010]

Not the ideal solution but it works if you are using sass:

html

<nav class="navbar">
  <div class="container">
     <!-- reset of navbar here -->
  </div>
</nav>

scss

@import "node_modules/bulma/bulma"
.navbar > .container { @extends .navabr }

There is probably a simpler and more eloquent solution but I'll wait on the maintainers to support .container before I write too many unnecessary lines.

Great framework by the way! Love it <3

Thanks!