I am new to bootstrap and am trying to make simple menu/nav.

I am trying to make contents of the menu centered along with the brand. Also when I make the screen smaller the menu items move under the brand. How can I make it so that it doesn't? There seems to be enough space in the nav to not make the items move under.

Note: I have not written any CSS for this.

<https://jsfiddle.net/b9smvjn0/>

HTML:

```
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#account-options" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <h4 class="navbar-brand">Image Box</h4>
    </div><!--end navbar header-->
    <!--togglable menu items-->
    <div class="collapse navbar-collapse" id="account-options">
      <ul class="nav navbar-nav">
        <li><a href="#">Upload Photo</a></li>
        <li><a href="#">Deactivate Account</a></li>
        <li><a href="#">Activate Account</a></li>
        <li><a href="#">Delete Account</a></li>
        <li><a href="#">Log Out</a></li>
      </ul>
    </div><!--end toggle-->
  </div><!--end container-->
</div><!--end navigation-->

```