Why does my bootstrap button overlap when window is resized smaller

Question

I am trying to have my buttons be beside each other at all display sizes.However when I make my window smaller, they overlap each other as shown in the jsfiddle.

I have tried using col-xs-offset and col-xs-push but it affects my col-md and col-lg settings for some reason, I have checked my bootstrap and html but there doesn't appear to be any issues there.

How can I fix this?

JSFiddle: https://jsfiddle.net/whywymam/2u79tpp2/1/

HTML:

  <div class="container">

              <div class="row upperRow">

                   <nav class="nav 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-md-4 col-lg-4">
                                     <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>
                           </li>

                    </ul>
        </div>
        <div class="clearfix visible-xs-block visible-md-block visible-sm-block visible-lg-block"></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="#">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 -->        


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

Solution

You may want to remove the unordered list that is containing your buttons and instead use a button group:

http://getbootstrap.com/components/#btn-groups

Also, since button groups make the buttons flush to each other, use some CSS to override their margins.

JS Fiddle:

https://jsfiddle.net/1dwq7bqx/

CSS

.btn-group button { margin: 0 7px; }

HTML

<div class="container">
    <div class="row">
        <div class="col-md-4 text-left">
            <img src="logo.jpg" class="img-responsive" alt="logo" />
        </div>
        <div class="col-md-8 text-right">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i> Job Seekers</button>
                <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i> Employers</button>
            </div>
        </div>
    </div>
</div>