.navbar-brand overlaps .navbar-toggler

[nightshiftnights]

On Windows 10 in Chrome 56.0.2924.87 and Firefox 51.0.1, when the viewport is reduced to 575 pixels or less (extra small breakpoint), the .navbar-brand and .navbar-toggler overlap each other in the center of the navbar when adding a .container to the navbar code present in the starter template example.

relevent html

<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary fixed-top">
            <div class="container">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="#">Navbar</a>

                <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active" style="background: #000;">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <div class="dropdown-menu bg-primary" aria-labelledby="dropdown01">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

[nightshiftnights]

Forgive me, looks like a duplicate. Although it looks like #21659 contains a solution, I can't figure out exactly what the solution is.

[josmaissan]

See also #21590 and is fixed in #21722

[nightshiftnights]

Thank you @josmaissan. I eventually found out that I didn't have the most up-to-date version of _navbar.scss and once I updated the problem was fixed, at least on my configuration.