html - Why won't my 5 child divs go 100% across the parent div when they are set at 20%? -

i have parent div set 100% width , when set each of 5 children divs 20% each, theoretically each child div should contained inside parent div, rather breaking on second line.

i have done before , has worked, isn't working now.

it looks -

<div class="parent">     <div class="child1"></div>     <div class="child2"></div>     <div class="child3"></div>     <div class="child4"></div>     <div class="child5"></div> </div> 

here link code - http://jsfiddle.net/dtk5zl1e/

i using bootstrap if makes difference.

just add common class elements want float , add:

          <div class="container">                  <h1 class="versions">choose versions report</h1>                  <div class="compare nav"> hello                 </div>                  <div class="first-draft nav"> hi                 </div>                  <div class="second-draft nav"> hello                 </div>                  <div class="third-draft nav"> hi                 </div>                  <div class="fourth-draft nav"> hello                 </div>              </div> 

and css

   .nav{     float:left;     } 

jsfiddle http://jsfiddle.net/a_incarnati/dtk5zl1e/1/