html - divs in same row are not displayed together -

i trying split row in two, text , image. however, no matter set size of divs, display on separate lines.

<div class="container-fluid">   <div class="row">      <div class="col-md-12">        <ul class="nav">          <li><a class="home" href="#home>">home</a><li>          <li><a href="#about">about</a></li>          <li><a href="#portfolio">portfolio</a></li>          <li><a href="#contact">contact</a></li>        </ul>      </div>   </div>   <div class="row">     <div class="col-md-6" id="first">jusdhflksadhflk</div>     <div class="col-md-6" id="second">jksdnf,asdnf,asd</div>   </div> </div> 

i have agonized on simple issue , checked documentation closely. missing simple?

the code written using codepen.io

there no css , width large enough col-md

thank you

set desired width display:inline-block; make div take width gave