html - Bootstrap grid row offset when changing font-size -

i trying make site navigation through bootstrap grid system. want make 3 columns 2 rows layout:

|title   |            |login| |subtitle|menu buttons|     | 

code works correctly, until set font-size title , subtitle. can me? snippet: http://www.bootply.com/glef6mfmxe

html:

  <header>      <div class="container">      <div class="row">        <div class="col-xs-4" id="title">foo title</div>        <div class="col-xs-6"></div>        <div class="col-xs-2">login</div>        <div class="col-xs-2" id="subtitle">bar subtitle</div>        <div class="col-xs-1">menu 1</div>        <div class="col-xs-1">menu 2</div>      </div>     </div>  </header> 

custom css:

#title{     font-size: 2em; }  #subtitle {     font-size: 1.5em; } 

you need learn that, different row, have use row class working on 2 row each column must on own row class check following code. sure code understand.

  <header>     <div class="container">      <div class="row">         <div class="col-xs-4" id="title">foo title</div>         <div class="col-xs-6"></div>         <div class="col-xs-2">login</div>      </div>      <div class="row">        <div class="col-xs-2" id="subtitle">bar subtitle</div>           <div class="col-xs-1">menu 1</div>           <div class="col-xs-1">menu 2</div>       </div>     </div>   </header> 

regards