مشکل ریسپانسیو در Navbar

سلام...
من بعد طراحی یه navbar با bootstap 4 به یه مشکل خوردم که به اینصورت بود که navabr بعد از کوچک شدن صفحه به عرض 500px تمام عرض صفحه رو پوشش نمیده....
کد هام رو میذارم لطفا اگه کسی میتونه کمک کنه...
کد های html

<nav class="navbar navbar-expand-lg navbar-light fixed d-flex justify-content-between" style="width: 100%;">
        <a class="navbar-brand" href="#"> <span class="grad">GRAD</span> <span class="SCHOOL">SCHOOL</span> </a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation" style="border: 0;">
            <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse d-lg-none" id="collapsibleNavId" style="display: inline-block !important;">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

                <li class="nav-item">
                    <a href="#">EXTERNAL</a>
                </li>

                <li class="nav-item">
                    <a href="#">CONTACT</a>
                </li>

                <li class="nav-item">
                    <a href="#">COURSES</a>
                </li>

                <li class="nav-item dropdown">
                    <a href="#">ABOUT US</a>
                </li>

                <li class="nav-item">
                    <a href="#">Home</a>
                </li>

            </ul>

        </div>
    </nav>

کد های css

body{
    font-family: "poppins";
    scroll-behavior: smooth;
    text-transform: uppercase;
    font-size: 16px;
}
nav[class*=navbar]{
    height: 80px;
    background: rgba(22,34,57,0.95);
    width: 100%;
}
.grad{
    color: #f5a425;
    font-size: 2rem;
    font-weight: bold;
}
.SCHOOL{
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
}
a[class*=brand]{
    margin-left: 2.5%;
}
li.nav-item a{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 15px;
    margin: 11px;
    font-size: 0.85rem;
}
li.nav-item a:hover{
    border: 2px solid #f5a425;
    transition: all .1s;
}
.active{
    border: 2px solid #f5a425;
}

ul[class*=nav]{
    display: flex;
    flex-direction: row-reverse !important;
}

div[class*=collapse]{
    display: inline-block!important;
}

i[class="fa fa-bars"]{
    font-size: 2rem;
    color: #fff;
    border: 0;
}