How to remove a style - html

Question

My current theme looks like this: https://gyazo.com/70ebe1ff52847bfbd7220f8e9bbe4854
But when i insert the bootstrap cdn I get: https://gyazo.com/1d97573cc6765ee55f99d99b5094f0cc
I check the css using chrome but I don't understand what changed when I got bootstrap. My navbar got larger and has a black line under the navbar. How can I know what's causing this and how can I remove it? Thank you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>
<!--Navbar-->
<nav class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse d-flex flex-row">
<div class="bg-white text-center navbar-brand-wrapper">
<a class="navbar-brand brand-logo" href="#"><img src="images/logo_star_black.png"/></a>
<a class="navbar-brand brand-logo-mini" href="#"><img src="images/logo_star_mini.jpg" alt=""></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center">
<button class="navbar-toggler navbar-toggler hidden-md-down align-self-center mr-3" type="button"
data-toggle="minimize">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline mt-2 mt-md-0 hidden-md-down">
<input class="form-control mr-sm-2 search" type="text" placeholder="Search">
</form>
<ul class="navbar-nav ml-lg-auto d-flex align-items-center flex-row">
<li class="nav-item">
<a class="nav-link profile-pic" href="#"><img class="rounded-circle" src="images/face.jpg"
alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-th"></i></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right hidden-lg-up align-self-center" type="button"
data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!--End navbar-->

Answer 1

Add css
.navbar-inverse
{
border: none !Important;
}