Can't figure it out why my navbar isn't collapsing properly

Question

I'm trying to create a navbar with a right section for the user to login. I can't figure it out why the collapsing isn't working properly. Depending on the screen size my left part and my right part come on top of each other instead of collapsing. Here's the code:

<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div class="navbar-collapse collapse" id="navbar-main">
        <ul class="nav navbar-nav">
            <li>
                <a href="/IgrejaVidaPlena/">Home</a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Igreja<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/IgrejaVidaPlena/church/about">Sobre nós</a>
                    </li>
                    <li><a href="/IgrejaVidaPlena/church/shepherd">Pastores</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/ministry">Ministérios</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/mission">Missões</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/cult">Cultos</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/PrayerRequest">Pedidos de Oração</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/shepherdReflection">Palavra do pastor</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/photoAlbum">Fotos</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right" style="margin-right: 0 !important">
            <li>
                <a href="/IgrejaVidaPlena/church/login">Login</a>
            </li>
        </ul>
    </div>
</div>

You can check it "working" in this jsfiddle

Answer 1

Add a media query:

@media (max-width: 990px) {
    ...
}

More info here.