Hey everyone, I'm having an issue with my menu:
https://i.sstatic.net/kPcP3.png
I'm trying to make the menu fill horizontally across the entire page, but it's only filling part of it. Could it be because I'm using the wrong bootstrap classes? If anyone has any tips or advice on how to fix this, please let me know!
ul {
list-style-type: none;
border-bottom-style: solid;
border-bottom-color: green;
position: relative;
}
li {
display: inline;
padding: 30px;
}
#menu a {
color: black;
}
#menu a:hover {
color: green;
font-weight: 700;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: green;
border-bottom-width: 6px;
border-radius: 4px;
}<body>
<section>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid wrapper">
<div class="navbar-header">
<ul id="menu">
<div class="row">
<div class="col-md-12">
<li><img src="Imagens/Logo.png"></li>
<li id="menu1"><a href="#">About us</a></li>
<li><a href="#"> Act</a></li>
<li><a href="#"> News</a></li>
<li><a href="#"> Videos</a></li>
<li><a href="#"> Contact us</a></li>
</div>
</div>
</ul>
</div>
</div>
</div>
</section>
</body>