在移动设备（CSS）上查看时的布局失真

Question

我使用float进行定位，但我注意到在移动设备上查看时，正确的规则会侵入中间文本。我怎么能避免这种扭曲？我想要这封信＆＃34; ABC＆＃34;留在中间规则。

＆＃13;

＆＃13;

p.header-text {
  font-family: monospace;
  font-size: 180%;
  color: #999999;
  font-weight: bold;
  margin-right: 6%;
  text-align: center;
}
.row-header .left-rule-po hr.rule1-dt1 {
  border-top: 4.1px solid #999999;
  margin-left: 40%;
  margin-right: 1.2%;
}
.right-rule-po hr.rule1-dt2 {
  border-top: 4.1px solid #999999;
  margin-right: 40%;
  margin-left: 2.5%;
}
.row-header .left-rule-po {
  float: left;
  width: 91%;
}
.row-header .main-text-po {
  float: right;
  width: 9%;
}
.right-rule-po {
  float: right;
  width: 47.2%;
  margin: 0%;
  padding: 0%;
}
.row-header {
  float: left;
  width: 52.8%;
  margin: 0%;
  padding: 0%;
  display: block;
}

＆＃13;

<div class="row">
  <div class="col-md-12 col-xs-12 col-sm-12">
    <div class="row-header">
      <div class="left-rule-po">
        <hr class="rule1-dt1">
      </div>
      <div class="main-text-po">
        <p class=" header-text">ABC</p>
      </div>
    </div>
    <div class="right-rule-po">
      <hr class="rule1-dt2">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;