Problem with container in nav(bar) width on small screens: Brand and toggler overlap

[manitu-opensource]

Having this (on BS 4 alpha 6)

<nav class="navbar navbar-static-top navbar-toggleable-md navbar-light bg-faded">

	<div class="container">
	
	    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-toggler-div" aria-controls="navbar-toggler-div" aria-expanded="false" aria-label="Navigation">
	        <i class="fa fa-bars"></i>
	    </button>
	
	    <a class="navbar-brand" href="/">
	        Band name here
	    </a>
	
	    <div class="collapse navbar-collapse" id="navbar-toggler-div">
	
	        <ul class="navbar-nav">
	
	            <li class="nav-item">
	                <a class="nav-link" href="#">Foo</a>
	            </li>
	
	            <li class="nav-item">
	                <a class="nav-link" href="#">Bar</a>
	            </li>
	
	        </ul>
	
	    </div>
	
	</div>

</nav>

(see https://jsfiddle.net/p47Lqb9f/ )

Problem: On small screens the brand name and the toggler overlap.

It seems to me that the container inside the nav is not wide enough. It's size is reduced due to media queries.

Possible solution: A possible fix is

@media (max-width: 576px) {
	nav .container {
	    width: 100%;
	}
}

[josmaissan]

I think this is the same as #21590 and solved in #21722

[bardiharborow]

Closing as duplicate of #21590. Holler if there's something I've missed. <3