<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="navigation">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
<li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
<li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
<li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
</ul>
<form class="form-inline">
<a href="#" onclick="signOut();">Sign out</a>
<div id="my-signin2">
<!-- google oauth stuff -->
</div>
</form>
</nav>
</div>
What is causing the display to appear as a vertical list instead of a horizontal one?