Bootstrap grid yapısı kullanırken ikonlar yan yana gelmiyor

<nav id="navbar">

                <div class="nav_top">

                    <div class="container">

                        <div class="row">

                            <div class="col-sm-6">

                                <div class="contactinfo">

                                    <ul class="nav nav-pills">

                                        <li><a href="#"><i class="fa fa-phone "></i> +555 149 47 57</a></li>

                                        <li><a href="#"><i class="fa fa-envelope"></i> enesaltindal234@gmail.com</a></li>

                                    </ul>

                                </div>

                            </div>

                            <div class="col-sm-6">

                                <div class="social-icons">

                                    <ul class="nav navbar-nav">

                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>

                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>

                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>

                                        <li><a href="#"><i class="fa fa-dribbble"></i></a></li>

                                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>

                                    </ul>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>