Align div to equal CSS sizes

Question

I have the following CSS:

.your-account-main-menu li {
    display: inline-block !important;
    padding: 15px;
    width: 12%;
    border: solid 1px #EDEDED;
}   

And the following structure

<ul class="your-account-main-menu">
    <li <?php if($this->uri->segment(1)=='myaccount' && $this->uri->segment(2)=='creditcard') echo "class=\"active\""; ?>>
        <a href="<?php echo base_url('myaccount/creditcard'); ?>">
            <div class="text-center">
                <i class="fa fa-money fa-3x" data-original-title="" title=""></i><br>
                Credit Card
            </div>
        </a>
    </li>   

    <li <?php if($this->uri->segment(1)=='myaccount' && $this->uri->segment(2)=='changepassword') echo "class=\"active\""; ?>>
        <a href="<?php echo base_url('myaccount/changepassword'); ?>">
            <div class="text-center">
                <i class="fa fa-lock fa-3x" data-original-title="" title=""></i><br>
                Change Password
            </div>
        </a>
    </li>   

    <li>
        <a href="<?php echo base_url("myaccount/logout"); ?>">
            <div class="text-center">
                <i class="fa fa-power-off fa-3x" data-original-title="" title=""></i><br>
                Exit
            </div>
        </a>
    </li>                       
</ul>

However, when exhibiting it stays that way:

I need to leave in uniform size, however, I do not want to define height and width of the same size fixed, how can I do this?