使bootstrap响应的问题

Question

我正在使我的网站响应，但我遇到了一些问题

1. 在移动模式下，dk和/md这样的小文字会离开屏幕

2. .box-head与PSD不同，如果你比较附加图像和我的代码结果，头部空间就会减少。

这是我的代码：

  <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 the 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 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;
}

图片：