css - bootstrap nav pull-right makes header zoom off screen -

upon zooming in mobile header zoomed in section of header class nav pull-right gets cut off screen. how can fix this? perhap fixing header size width of screen?

  <nav>     <ul class="nav pull-right">       <div class="signinform" <% if request.path == root_path && current_user.nil? %> style="padding-top: 18px;" <% end %>>           <%= form_for(:session, url: sessions_path, :html => { :class => "form-inline"}) |f| %>               <input id="session_email" name="session[email]" type="text" class="input-medium" placeholder="email">               <input id="session_password" name="session[password]" type="password" class="input-medium" placeholder="password">               <button type="submit" class="btn btn-small btn-primary">sign in</button>           <% end %>       </div>     </ul>   </nav> 

when used bootstrap header got information needed youtube video. https://www.youtube.com/watch?v=gpbp1jecluu&list=fl5jjgnxjcyi4i0qkfe1-nkw&index=3 .

the problem bootstrap header has done way in order work. things dynamic resizing dependant on being done ceratin way. way header should work in general but, should check out youtube video.

good luck!

<div class="navbar">   <div class="navbar-inner">    <div class="container">     <div class="nav pull-right">      <div class="signinform" <% if request.path == root_path && current_user.nil? %> style="padding-top: 18px;" <% end %>>       <%= form_for(:session, url: sessions_path, :html => { :class => "form-inline"}) |f| %>           <input id="session_email" name="session[email]" type="text" class="input-medium" placeholder="email">           <input id="session_password" name="session[password]" type="password" class="input-medium" placeholder="password">           <button type="submit" class="btn btn-small btn-primary">sign in</button>       <% end %>      </div>     </div>    </div>   </div>  </div> <!-- closes class navbar -->