Navbar not expanding to full width? - html

Question

Host Folder
If you click the link then click "all.html", you should see a page with an unfinished navbar. The lis in the list are stacking for some unknown reason. Could someone tell me why "Member Resources" and on are in a row below and how to fix that? I tried playing with the text-align, float, width, and margins of the containing div, the ul, and the lis but haven't gotten anywhere. Thank you (Note: Using Bootstrap v3.3.6)!
HTML:
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS:
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
SIDENOTE: Does anyone know why there is a scrollbar at the bottom of the page? There's no extra content to the right and I'm pretty sure there are no margins that'd be pushing it out that far. I see it on Chrome, anyone else see it and know why it's occuring?

Answer 1

You should set width of #topnav ul to 100% for setting it to full width.
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
Second way to see a full width navbar is to do as the bootstrap guide say
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
</div>
</nav>
Look carefully to notice that the navbar is full width and of different color(left intentionally for you to notice). You can remove the background color from your ul and put it on your navbar class instead instead

Answer 2

Try this:
HTML
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}