Centering menu nav-bar items in center of newvar twitter bootstrap

Question

This is what I have. How do I center these 3 navbar items to the center of the page without messing everything up in mobile view? Thanks.

Any CSS tricks?

  <div class ="container" id = "main">
      <div class="navbar navbar-fixed-top">
          <div class="container">

                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <button class="navbar-toggle" data-target=".navbar-responsive-collapse"       
          data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>                                     

                <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                    <a href="#"> About us </a>
                        </li>

                         <li class="dropdown">
                            <a href="#" class="dropdown-toggle" 
     data-toggle="dropdown">Services <strong class="caret"></strong></a>
                            <li>

                                <ul class="nav navbar-nav">
                        <li class="active">
                    <a href="#"> Contact </a>
                        </li>

                </div><!-- end nav-collapse -->

            </div><!-- end container -->
        </div><!-- end navbar -->