Keeping elements centered in bootstrap navbar - html

Question

I have a navbar that features a search bar and then the hamburger menu next to each other. Im having trouble keeping these elements centered. when I switch between different mobile screen sizes the element position changes
here is the html:
<div class="col-xs-12" id="mobile-search">
<div class="search-area">
<ul class="search-bar" id="mobile-go">
<li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</li>
<li class="search-wrapper no-wrap">
<div class="no-wrap search-box" id="mobile-center">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</div>
</div>
</div>
I want the ul elements to always be centered but adding the col centered class did nothing. What else should I be trying?
edit: Full code for header file:
<ac:pagelayout id="HeaderPage">
<div class="LayoutTopTop">
<div class="row">
<div class="col-sm-12 hidden-xs">
<ac:widgetarea id="HeaderBar"><ac:widget id="HTML3742" type="HTML"><div class="top-bar">
<ac:if setting="Show Phone Number in Header">
<div class="top-bar-info"><strong>##STOREPHONE##</strong></div>
</ac:if>
<ac:if setting="Show Email Address in Header">
<div class="top-bar-info"><strong> <a class="inherit no-ul color-inherit" href="mailto:##STOREEMAIL##">##STOREEMAIL##</a></strong></div>
</ac:if>
</div></ac:widget>
</ac:widgetarea>
</div>
</div>
<div class="row top-header">
<div class="col-sm-7 contentCentered hidden-xs ">
<ac:widgetarea id="UtilNavArea"><ac:widget id="HTML3744" type="HTML">
<a href="/">
<img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech ">
</a>
</ac:widget>
</ac:widgetarea>
</div>
<div class="col-sm-4 col-sm-push-1 hidden-xs ">
<ul class="header-nav nav navbar-nav ">
<ac:if setting="Show Search as Dropdown">
<li><a href="#" data-toggle="dropdown">
<i class="icon-search"></i>
<span class="visible-xs visible-lg">Search</span>
</a>
<ul class="dropdown-menu">
<li>
<div class="panel-body no-wrap search-box" id="nav-search">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</li>
</ac:if>
<li>
<ac:if setting="Show Customer Login as Dropdown">
<a href="#" data-toggle="dropdown">
<i class="icon-user"></i>
<span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span>
</a>
<ul class="dropdown-menu">
$$CUSTOMERLOGIN3739$$
</ul>
<ac:else>
<a href="/store/myaccount.aspx">
<i class="icon-user"></i>
<span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span>
</a>
</ac:else>
</ac:if>
</li>
<li class="no-wrap">
<ac:if setting="Show Shopping Cart as Dropdown">
<a href="#" data-toggle="dropdown">
<div class="in-block"><i class="icon-shopping-cart"></i></div>
<span class="visible-xs visible-lg">Shopping Cart</span>
##IF[CartIsEmpty]## ##ELSE##
<span class="badge">##CARTITEMSCOUNT##</span>
##ENDIF##
</a>
<ul class="dropdown-menu">
<li>
##IF[CartIsEmpty]##
<p class="m-20">Your cart is empty!</p>
##ENDIF##
$$SMALLSHOPPINGCART3740$$
</li>
</ul>
<ac:else>
<a href="/store/shopcart.aspx" rel="nofollow">
<div class="in-block"><i class="icon-shopping-cart"></i></div>
<span class="visible-xs visible-lg">Shopping Cart</span>
##IF[CartIsEmpty]## ##ELSE##
<span class="badge">##CARTITEMSCOUNT##</span>
##ENDIF##
</a>
</ac:else>
</ac:if>
</li>
</ul></div> <!-- just added-->
</div>
<ac:widgetarea id="TopHeaderWidgets"><ac:widget id="MENUBAR3738" type="MenuBar" linkgroupid="1">
<ac:visibilityarea id="dvControl">
$$ADMINHELP$$<div id="little">
<header class="top"></header>
<div id="nav">
<div>
<img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech " id="top-logo">
</div>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation" data-spy="affix" data-offset-top="60">
<div class="navbar-header">
<div class="col-xs-12" id="mobile-search">
<div class="search-area">
<ul class="search-bar" id="mobile-go">
<li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</li>
<li class="search-wrapper no-wrap">
<div class="no-wrap search-box" id="mobile-center">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
</div><!--end of mobile-->

Answer 1

Try to wrap your ul elements or whatever content you want to centre inside div with container class.
<div class="container">
Put Content Here
</div>