HTML renders undefined line through element? - html

Question

The following code generates 3 boxes with a glyphicon icon, text and title. (NOTE: with the JSFiddle, you need to have the display window in the medium+ size bracket to generate the correct layout). These are responsive and use the bootstrap framework. When I preview the result, I sometimes get a line under the glyph. What is causing this? I get it in both Google Chrome and Microsoft Edge, however, sometimes when I zoom in, it disappears, then if I zoom in more, it reappears? Other times when I load the same file, it doesn't show.
<div class="row Page2">
<div class="col-sm-2 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-2 margin"></div>
<div class="col-sm-2 margin"></div>
<div class="col-sm-2">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h3><strong>Simple</strong></h3>
</div>
<div class="col-xs-6 col-sm-12 eqheight1">
<p class>Text.</p>
</div>
</div>
</div>
</div>
the css:
.Page2 > * {
border: 5px solid white;
background: #3DBEAF;
}
.Page2 > *:nth-child(-n+6) {
border-bottom: 0;
padding-top: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.Page2 > *:nth-last-child(-n+6) {
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.eqheight1,
.eqheight2,
.eqheight3 {
background: #3DBEAF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
Any ideas, or know how I can test this further?