col-sm-push影响col-lg设置

Question

我目前面临两个问题：

• 用于右上角图标（求职和雇主按钮）的Col-sm会导致col-lg设置混乱。我试图使它们看起来像下面的图像。
• 左上角的Logo（id：LogoFW）导致标题在mozilla firefox旁边有一个迷你垂直滚动条

我该如何修复它们？

JSfidle： https://jsfiddle.net/whywymam/ta03a31x/

HTML：

<div class="Container">

              <div class="row middleRowRow">

                   <nav class="navbar-header logoFw">
                       <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
                           <a href="../mainpage/home.php" class="brand navbar-brand "> <img src="../image/logo.jpg" class="img-responsive" alt="logo"></a>
                       </div>
                   </nav>

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

                               <li>
                                   <div class="col-xs-3 col-sm-4 col-md-4 col-lg-4">    
                                         <a href="../jobseeker/signupLogin.php" class="btn btn-danger" role="button">
                                             <i class="glyphicon glyphicon-user"></i>Job Seeker
                                         </a>
                                   </div>
                               </li>      

                               <li>
                                   <div class="col-xs-3 col-xs-push-7 col-sm-4 col-md-4 col-lg-4">
                                     <div class="empColl">
                                         <a href="../employer/signupLoginEmp.php"  class="btn btn-danger" role="button" >
                                             <i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i>Employer
                                         </a>
                                     </div>
                                   </div>
                               </li>

                        </ul>

                             <div class="clearfix visible-xs-block"></div>

                            <div class="clearfix visible-md-block"></div>

                            <div class="clearfix visible-sm-block"></div>

                            <div class="clearfix visible-lg-block"></div>

        </div>



        <div class="row bottomRow">

                <div class="col-sm-12 col-md-12 col-lg-12">

                <nav role="navigation" class="navbar-inner navbar-default navbar-static-top navcolor">

                          <div class="navbar-header ">

                              <!--button to appear when display is on mobile device-->
                              <button type="button" data-target="#nav-collapse" data-toggle="collapse" class="navbar-toggle">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>

                          </div>

                          <div id="nav-collapse" class="collapse navbar-collapse topmenu">

                              <ul class="nav navbar-nav center-block">
                                <li><a href="../mainpage/home.php">Home</a></li>
                                <li><a href="../mainpage/about.php">About</a></li>
                                <li><a href="../mainpage/pyw.php">Prove Your Worth</a></li>
                                <li><a href="#">Job</a></li>
                                <li><a href="../mainpage/resources.php">Resources</a></li>
                              </ul>

                          </div>          

                    </nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->

                </div>

            </div> <!-- end middle row -->

            <!--to indicate which page user is on -->        
            <script type="text/javascript">
                        $(function() {
                            // this will get the full URL at the address bar
                            var url = window.location.href;

                            // passes on every "a" tag
                            $(".topmenu a").each(function() {
                                // checks if its the same on the address bar
                                if (url == (this.href)) {
                                    $(this).closest("li").addClass("active");
                                }
                            });
                        });   
            </script>

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