导航栏右侧屈曲，屏幕尺寸超过1900像素

Question

我的网站上有 THIS 导航栏。我有自定义编码HTMl和CSS，没有什么过于花哨，HTML下面：

<nav class="navbar" role="navigation">

    <div class="container">

        <button class="menu-btn"id="menu-btn">
                <i class="fa fa-bars"></i>
        </button>

        <ul class="nav-left">
            <li><a href="">ABOUT lalalala</a></li>
            <li><a href="">WHY a second citizenship?</a></li>
            <li><a href="">tools</a></li>
        </ul>

        <a href="#" class="brand-logo">
            <img src="img/logo/fairbridge-logo.png" alt="fairbridge logo">
        </a>

        <ul class="nav-right">
            <li><a href="">Advantages</a></li>
            <li><a href="">lalalala code of ethics</a></li>
            <li><a href="">Contact</a></li>
        </ul>      


    </div>

    <ul class="nav-mini">

        <li><a href="">ABOUT lalalalala</a></li>
        <li><a href="">WHY a second citizenship?</a></li>
        <li><a href="">tools</a></li>
        <li><a href="">Advantages</a></li>
        <li><a href="">lalalalala code of ethics</a></li>
        <li><a href="">Contact</a></li>

    </ul>  

</nav>

下面的CSS：

我有以下导航栏代码：

@media (min-width:992px) {
    .nav-left {
        float: left;
    }

    .navbar .nav-mini {
        display: none;
    }

    .navbar [class*="nav-"] > li a:after {
        position: absolute;
        opacity: 0;
        content: '';
        left: 20%;
        right: 20%;
        bottom: -10px;
        background: #1b1464;
        height: 2px;
    }

    .navbar [class*="nav-"] > li a:hover:after {
        -webkit-animation-name: nav-line;
        -o-animation-name: nav-line;
        animation-name: nav-line;
        -webkit-animation-duration: .3s;
        -o-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    .nav-right {
        float: right;
    }
    .navbar [class*="nav-"] {
        padding: 3.93em 0;
    }
    .navbar [class*="nav-"] li {
        display: inline-block;
        margin-left: 2.14em;
    }
    .navbar .nav-left li:first-child {
        margin-left: 0;
    }
    .navbar .nav-left li:last-child {
        margin-right: 2.14em;
    }

    .menu-btn {
        display: none;
    }

}

现在，当我在1900+的屏幕上查看此菜单时，右侧的导航将会弯曲并降下来，为什么会发生这种情况？