html - unable to keep an element inside parent element -

using css, how can keep element inside parent element. have created div & placed hr tag inside along 2 combobox.

the hr tag going outside div. please check fiddle.

<div style="width:70%; border:solid">   <hr style="position:absolute;width:100%;z-index:-1;" /> option 1   <select style="margin-right:50px">     <option value="a">a</option>     <option value="b">b</option>     <option value="c">c</option>    </select>   <span></span> option 2   <select>     <option value="a">a</option>     <option value="b">b</option>     <option value="c">c</option>    </select> </div> 

style:

h2 {   width: 100%;   text-align: center;   border-bottom: 1px solid #000;   line-height: 0.1em;   margin: 10px 0 20px; }  h2 span {   background: #fff;   padding: 0 10px; }  hr {   margin-top: 10px;   margin-bottom: 10px;   border-top-color: #ccc;   border-top: 1px solid #eee; } 

add position: relativeto parent div. position absolute relative document unless inside element has relative positioning.