Новичок в bootstrap, есть пара проблем

body { 
     
} 
.header { 
    background-image: url(../images/header.png); !important 
} 
.navbar { 
    background-color: rgba(0, 0, 0, 0); !important 
} 
.navbar-brand { 
    color: white; 
    font-weight: 700; 
    font-size: 27px; 
    font-family: Oswald; 
} 
.collapse { 
    justify-content: flex-end; 
} 
.nav-link { 
    color: white; 
} 
.navbar-brand:hover { 
    color: white; 
} 
.nav-link:hover { 
    color: white; 
    border: 1px solid white; 
    border-radius: 35%; 
}

<header> 
  <nav class="navbar navbar-expand-sm"> 
    <a class="navbar-brand" href="#">Bouncy</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
                <span class="navbar-toggler-icon"></span> 
            </button> 
    <div class="collapse navbar-collapse " id="navbarSupportedContent"> 
      <ul class="navbar-nav"> 
        <li class="nav-item active"> 
          <a class="nav-link " href="#">Hello <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link " href="#">About</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link " href="#">Services</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link " href="#">Portfolio</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link " href="#">Team</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link " href="#">Blog</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link " href="#">Contacts</a> 
        </li> 
      </ul> 
    </div> 
  </nav> 
</header>