Bootstrap navbar list items overflowing with resize - html

Question

I'm using the newest version of Bootstrap, but not sure where to start fixing an issue with the navbar. The navbar looks right up until I decrease the width of the browser. The rest of bootstrap's components look fine with a resize, but the list items of the navbar get moved into a weird order. I looked into collapsing, but I think this may be an issue just of padding/width. I haven't made any edits to Bootstrap css. Any places to start?
<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>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div><!-- /.container-fluid -->
</div>
</div>
Here's the fiddle: https://jsfiddle.net/y6k4jvv5/3/

Answer 1

add li tags around the two a tags and add css for the li to float left
<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">
<li><a href="#">
<img alt="Logo" src="./html/Images/logo.png" height="20" />
</a></li>
<li>My Navbar</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div><!-- /.container-fluid -->
</div>
</div>
li {
float: left;
}
https://jsfiddle.net/y6k4jvv5/4/