why two columns are pressed together?

Columns

Why projects and blog are pressed to each other? No matter of font-size

  <div class="container">
    <div class="row">

        <div class="col-xs-12 col-sm-2 col-md-6"><img src="../img/logo.png" alt=""></div>

        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">Home</div>
        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">About</div>
        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">Projects</div>
        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">Blog</div>
        <div class="col-xs-12 col-sm-2 col-md-1  top-puller bolder">Contact</div>

    </div>

.top-puller{
  margin-top: 20px;
 }
 .bolder{
font-weight: bold;
font-size: 25px;
}