ヘッダーのレイアウトについて

Question

【やりたいこと】
ログインしているユーザー毎にヘッダーの「user」「admin」「superior」のロゴを表示させようとしたら他のリンクが改行されてしまっているので改行されないようにしたい。

【試したこと】
white-space: nowrap;を試したが変化なし

【質問】
改行している原因がわからないのですがヘッダーを一行に表示させるにはどうしたらいいでしょうか？

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "勤怠システム", root_path, id: "logo" %>
    <% if logged_in? %>                            ←追加したコード
      <% if current_user.admin? %>                 ←
        <p class="logo admin">Admin</p>            ←
      <% elsif current_user.superior? %>           ←
        <p class="logo superior">Superior</p>      ←
      <% else %>                                   ←
        <p class="logo user">User</p>              ←
      <% end %>                                    ←
    <% end %>                                      ←
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "ホーム", root_path %></li>
        <% if logged_in? %>
          <% if current_user.admin? %>
            <li><%= link_to "ユーザ一覧", users_path %></li>         
          <% end %>          
        <% else %>
          <li><%= link_to "ログイン", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

.logo{
  font-size: 15px;
  padding-top: 12px;
}

.superior{
  color: #FF0;
}

.user{
  color: #33FFCC;
}

.admin{
  color: #F00;
}

ul{
  white-space: nowrap;
}

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

・ログイン時

・ログアウト時

Answer 1

viewにdivタグを追加しcssでfloat: left;としたら解決できた。

<% if logged_in? %>
  <% if current_user.admin? %>
    <div class="header-name">
      <div class="admin">Admin</div>
    </div>
  <% elsif current_user.superior? %>
    <div class="header-name">
      <div class="superior">Superior</div>
    </div>
  <% else %>
    <div class="header-name">
      <div class="user">User</div>
    </div>
  <% end %>
<% end %>

.header-name{
  float: left;
}