Recently, I started working with the latest version of Bootstrap and encountered an issue with the navigation bar. Everything looks great until I start resizing the browser width. While other Bootstrap components adjust well to the resize, the list items in the navbar seem to get jumbled up in a strange order. I initially thought it might be related to collapsing, but now I believe it could be more about padding or width settings. I haven't made any changes to the Bootstrap CSS. Any suggestions on where I should begin troubleshooting this?
<div class="container-fluid">
<div class="container-fluid" id="header">
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<a class="navbar-brand" href="#">
<img alt="Logo" src="./html/Images/logo.png" height="20" />
</a>
<a class="navbar-brand" href="./index.html">My Navbar</a>
<li><a href="./html/page1.html">List item 1</a></li>
<li><a href="./html/page2.html">List item 2</a></li>
<li><a href="./html/page3.html">List item 3</a></li>
</ul>
</div><!-- /.container-fluid -->
</div>
</div>
For reference, here's the fiddle: https://jsfiddle.net/y6k4jvv5/3/