Google Custom Search conflicting with Bootstrap and Skipping a Line in NavBar - html

Question

I just incorporated Google Custom Search into my Bootstrap powered NavBar. Some weird formatting occurred which I fixed by adding the below CSS code.
This fixed many of the issues but there is still one left: the search box forces a line skip within my NavBar.
Below is my HTML and CSS code.
HTML code (basically the bootstrap template replacing their search form with Google's):
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</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">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!-- Google search -->
<!-- <gcse:search></gcse:search> -->
<div style="width: 20%;">
<gcse:search></gcse:search>
</div>
<!-- Bootstrap search -->
<!-- <form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Android Term">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form> -->
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS code
/* AM22 - To make google search box appear correct */
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button
{
box-sizing: content-box;
line-height: normal;
}
/* AM22 - To make google search results tabs appear correct */
.gsc-tabsArea div
{
/*By default, Google custom search CSS sets it as AUTO, which shows scroll bars*/
overflow: visible;
}
.nowrap {
white-space: nowrap;
}
I tried a few variations of the nowrap attribute, the nobr tag and white-space: nowrap; but none of these worked. Any suggestions?

Answer 1

For my website (link in my comment above) I placed the search box in the <div class="navbar-header">
I believe I also had to manually set the width so it wasn't full-page width.
Now about styling my version...