layout changed once published live - html

Question

I received help centering an image within a box using a "helper" pseudo element element, which was working until I published it live. I'm not sure what's going on.
you can see whats going on at live link. And this is the code I was using for the layout
Code:
.offer {
width: 288px;
float: left;
margin-right: 25px;
}
.box {
position: relative;
display: block;
border: solid 3px #19468d;
height: 310px;
width: 100%;
margin-top: 11px;
text-align: center;
}
.price span {
font-family: avenir next;
font-weight: 700;
background-color: #19468d;
color: white;
font-size: 21px;
padding: 0px 5px;
left: 0;
padding-left: 0;
}
.price a {
position: relative;
font-family: avenir next;
font-weight: 700;
background-color: #19468d;
color: white;
font-size: 21px;
padding: 1px 7px;
left: 3px;
bottom: 1px;
border-style: solid;
border-color: #19468d;
}
.price a:hover {
color: #19468d;
background-color: white;
border-style: solid;
}
#cost {
position: absolute;
left: 0px
}
#info {
position: absolute;
bottom: 0px;
right: 0px
}
.box img {
display: inline-block;
margin: 0 auto;
text-align: center;
max-width: 252px;
vertical-align: center;
}
#grid {
margin: 0px;
display: flex;
display: -webkit-flex;
/* Safari 8 */
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
/* Safari 8 */
-webkit-justify-content: center;
/* Safari 8 */
margin-left: 20px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.price {
text-align: left
}
.price #dollar {
padding-right: 0px;
padding-left: 5px;
}
<div class="offer">
<div class="box">
<div class="price">
<span id="dollar">$</span><span>27</span>
</div>
<span class="helper"></span>
<img src="http://cdn2.hubspot.net/hubfs/75704/JPs-Slices/2016_Yes/img/floorexammat.jpg">
<div class="price" id="info">
Buy Now
</div>
</div>

Answer 1

Rather use flex for the images. On the ".box" you can do
display:flex;
justify-content: center;
and remove the helper.