html - issue in making bootstrap responsive -

hi making website responsive getting issues 1) small text "dk" , "/md" goes off screen when in mobile mode

2) .box-head not same psd have if compare attached image , code result there less space in head.

here code:

  <div class="container">  <div class="row-fluid">  <div class="col-md-4">  <div class="box">  <div class="box-head">  <h3>basic</h3>  <div class="line"><hr></div>  <p>18 tv channels</p>  <p><a href="">see list</a></p>   </div>   <!-- box head closed -->  <div class="box-info">   <div class="content-wrapper">  <img src="card.png" alt="" class="img-responsive">  <div class="text-wrapper">  <div class="row">  <div class="col-md-8">  <h1>99</h1>  </div>  <div id="pack-price">  <span>dk</span>  <br>  <span class="md">/md</span>  </div>   </div>  </div>   </div>  <div id="charges">  <p>min charge dk 1992 , -</p>  <p>8 months plan</p>  </div>  </div>  <button type="submit" class="btn btn-danger btn-lg center-block">tell me more</button>  </div>  </div> 

css

.box { background:white;  } .box-head { height:25%; } .box-head p,h3 { text-align:center; position:relative; } .box-head p { font-size:18px; font-weight:700;}   .box-head p { color:#2f84cc; font-size:13px; text-decoration:underline; position:relative; top:-15px; } .box-head h3 { top:20px; font-size:36px; } .box-info h1 { text-align:center; margin-top:40px; } #pack-price { position:relative; top:22px; } #charges { text-align:center; position:relative; top:10px;}  .box button { margin-top:30px; } 

image: image