Bootstrap: Center Navigation Searchbar when Collapsed

Question

Im trying to center my search bar when collapsed.
At the moment it looks like this:

See that the links are centered but not the search bar.

This is the HTML:

<!-- Navigation Bar Start -->
    <div class = "navbar navbar-default navbar-static-top"> 

        <!-- Container -->
        <div class = "container">

            <div class=".navbar-header">

            <!-- Site Title -->
            <a href = "#" class = "navbar-brand">James Woods</a>

            </div> <!-- END Navbar Header -->

            <!-- Mobile Nav Button -->
            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button> <!-- END Mobile Nav Button -->

            <!-- Navigation Links -->
            <div class = "collapse navbar-collapse navHeaderCollapse">

                <ul class = "nav navbar-nav navbar-right">

                    <li class="active"><a href = "">Home</a></li>
                    <li><a href = "">Creations</a></li>
                    <li><a href = "blog/index.html">Blog</a></li>

                    <li class = "dropdown"> 
                        <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Links<b class = "caret"></b></a>

                        <ul class = "dropdown-menu">
                            <li><a href = "#">Twitter</a></li>
                            <li><a href = "#">Deviant Art</a></li>
                            <li><a href = "#">Scratch</a></li>
                        </ul>
                    </li> <!-- END Links Nav -->

                    <li><a href = "contact.html">Contact Me</a></li>

                    <li>

                        <form class="navbar-form navbar-left form-inline" id="search" role="search">

                            <div class="form-group-group">
                                <div class="input-group" style="width: 220px;">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button"><b class = "glyphicon glyphicon-search"></b></button>
                                    </span>
                                </div>
                            </div> <!-- END form group div -->

                        </form> <!-- END search bar form -->

                    </li>
                </ul> <!-- END navbar list -->

            </div> <!-- END navbar collapse div -->

            </div> <!-- END .navbar-header div -->

        </div> <!-- END container div -->

    </div> <!-- END navbar div -->

    <!-- END ALL NAVBAR CONTENT -->

And now the custom CSS:

@media (max-width: 768px){
.navbar-nav li{
text-align: center;
    }
}

Answer 1

Add the input-group to your CSS. Center it using margin: 0 auto;

@media (max-width: 768px){
.navbar-nav li {
    text-align: center;
    }
    .navbar-form .input-group {
    margin: 0 auto;
    }
}

http://bootply.com/108576