I'm using a bootstrap navbar (code to follow) fixed at the top of the page. Instead of having the navbar span the entire of the page on Desktops, I'd rather restrict the width and center it to fit with the content. While I can restrict the width, I cannot figure out how to center it after doing that; it just hangs out on the left. All of my searches have been fruitless thus-far. Most seem to want to center links, which isn't my problem.
Here's the way the site looks now (Navbar on the left)
And here's how I'd like it to look (more or less):
Here's my current code (just what I think is the pertinent section):
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10" style="background-color: #FFF;">
<nav class="navbar navbar-default navbar-fixed-top" style="max-width:950px;">
<div class="container-fluid" style="background-color: #FFF; width: 100%; padding-top: 15px;text-align: center;">
<div style="display: inline;padding-right: 10px;">
<a href="#"><img src="/images/logo.png" style="position: relative; top: -12px;" /></a>
</div>
<div style="display: inline;">
<div class="dropdown" style="display: inline;">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Welcome, [NAME] <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-user"></span> My Profile</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages <span class="badge pull-right">5</span></a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-usd"></span> Make A Payment</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="/?Action=Logoff" ><span class="glyphicon glyphicon-off"></span> Sign Out</a></li>
</ul>
</div>
</div>
<div class="slogan" style="float: none;display:inline;white-space: nowrap;">[HEADER TEST]</div>
</div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<!--a class="navbar-brand" href="#"><img src="/images/logo.png" style="position: relative; top: -15px;height: 50px;"/></a-->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!--li class="active"><a href="#">Dashboard</a></li-->
<li><a href="/Dashboard.asp">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li>
<a href="#">Marketing </a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 3 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 5 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<div style="display: inline;position: relative; top: 10px;" class="SearchForm">
<div style="margin-right: 20px;" class="SearchForm">
<form method="get" action="search" style="display: inline;">
<input class="search_field" type="text" style=" margin: 0px;float: none; min-width: 22px; width: 22px;"
onFocus="this.style.width='150px';" onblur="this.style.width='22px';" />
</form>
</div>
<a href="#" target="_blank">
<img src="/images/social/facebook.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
<a href="#" target="_blank">
<img src="/images/social/twitter.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
<a href="#" target="_blank">
<img src="/images/social/linkedin.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
