How can I place my elements inside my navbar? - html

Question

The elements of my navbar seem to be stuck outside of it. I'm not sure why?
Here's my code:
<nav class="navbar navbar-expand-lg navbar-inverse"></nav>
<div class="container-fluid">
<div class="navbar-header">
<a
style="color: black; text-decoration: none; font-size: 2rem;"
class="navbar-brand"
href="#"
>name<span class="fas fa-microscope fa-1x"></span
></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="material-icons">menu</i>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">Protect</li>
<li class="nav-item">About</li>
</ul>
</div>
</nav>
.nav a{
color: white !important;
font-size: 20px;
}
.navbar-brand{
color: white !important;
font-size: 20px;
font-family: sans-serif;
}
And here's what the navbar looks like:
website
Does anyone know how to fix this? (Also does the menu icon have a white background and is black, whereas the microscope icon has an invisible bg and is white?)
Thanks!

Answer 1

You close the navbar in the beginning, so remove the </nav> tag from your first line.
Remove 2nd line, it is unnecessary code here.
Assign class "nav-link" for "Protect" & "About menu".
<nav class="navbar navbar-expand-lg navbar-inverse">
<div class="navbar-header">
<a
style="color: black; text-decoration: none; font-size: 2rem;"
class="navbar-brand"
href="#">name<span class="fas fa-microscope fa-1x"></span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="material-icons">menu</i>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Protect</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</nav>