navbar transparent over slider

I want to make a transparent and fixed navbar over a carousel.

The navbar border is displayed though i want to remove it.

Here is the code :

<header>
    <div class="navbar navbar-expand-lg" style=" background-color: transparent !important;">
        <div class="container-fluid">
            <a class="navbar-brand" href="https://bootsnipp.com/snippets/40NOn">
                <img alt="logo" src="img/logo-test.jpg" class="rounded-circle" style="width: 50px">
            </a>

            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto" style="font-size: 24px;">
                    <li class="nav-item"><a href="#" class="nav-link text-light">Why us</a></li>                                    
                    <li class="nav-item ml-3"><a href="#" class="nav-link text-light">FAQ</a></li>
                    <li class="nav-item ml-3"><a href="#" class="nav-link text-light">About us</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-light">Contact us</a></li>
                </ul>
            </div>
        </div>
    </div>

</header>
<section>
    <!--Carousel Wrapper-->
    <div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">

and you can visit the sample page here