issue in making bootstrap responsive - html

Question

I am making my website responsive but I am getting certain issues
the small text like dk and /md goes off the screen when in mobile mode
.box-head is not same as PSD I have if you compare the attached image and my code result there is less space in the head.
here is my 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>See the list</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 a {
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: