CSS tiles size tweak - css

Question

i am trying to make my tiles look the same even text inside increase.but it does seems to be able to work even with word property.i want to make the "buy extended warranty" and ""List machines for service pack" to be same as others.
Anyone can help?
.tile {
width: 100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 30px;
margin-bottom: 40px;
text-align:center;
}
.tile:hover
{
background:#F8F9F9;
}
<div class="tab-pane active" id="warranty">
<div class="col-md-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>
</div>
<div class="col-md-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>
</div>
<div class="col-md-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>
</div>
<div class="col-md-4 ">
<a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>
</div>
<div class="col-md-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>
</div>
<div class="col-md-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>
</div>
<div class="col-md-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>
</div>
</div>

Answer 1

You could use flex-box for this:
css:
.tab-pane {
display: flex;
flex-wrap: wrap;
}
.tile {
width: 100%;
padding: 30px;
margin-bottom: 40px;
text-align: center;
display: block;
}
.tile:hover {
background: #F8F9F9 !important;
}
HTML
<div class="tab-pane active" id="warranty">
<div class="col-sm-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>
</div>
<div class="col-sm-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>
</div>
<div class="col-sm-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>
</div>
<div class="col-sm-4 ">
<a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>
</div>
<div class="col-sm-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>
</div>
<div class="col-sm-4">
<a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>
</div>
<div class="col-sm-4 ">
<a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>
</div>
</div>
I adjusted the class on your col-md-4 to col-sm-4 so you could see it in action. I included the bootstrap CDN CSS, as you are using bootstrap class names in your HTML. And I added !important to override your inline color styles on the anchor tags.
Here's the fiddle to see it in action:
https://jsfiddle.net/mjqfjbh0/1/