I want my text to span the entire width of the navigation bar, similar to this example
Currently, it looks like this
I am utilizing the most recent bootstrap CSS and also have my own custom stylesheet.
Here is the HTML code for reference:
<!doctype html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" id="logo" class="img-responsive">
</div>
<div class="col-md-4" id="searchbox">
<div id="search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg"/>
</div>
</div>
</div>
<div class="col-md-1" id="search-button">
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
<span>
</div>
<div class="col-md-3" id="login-name">
<p> Logged in: John Smith </p>
</div>
<div class="col-md-1">
<a href="#"><i class="glyphicon glyphicon-cog" id="settings-cog"></i></a>
</div>
</div>
<div class="row">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">Projects</a></li>
<li><a href="#contact">News</a></li>
<li><a href="#contact">Careers</a></li>
<li class="active"><a href="#contact">Contact Us</a></li>
<li><a href="#contact">About Us</a></li>
<li><a href="#contact">Case Studies</a></li>
<li><a href="#contact">Blog</a></li>
<li><a href="#contact">Customers</a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>