Struggling to center my Font Awesome Icons

I am having trouble centering my font-awesome icons and my buttons. I tried doing in through a through my CSS folder and I also tried inline styling as well. I have them both in my example below. Can somebody tell me why it is not centering and what would be the best approach to fixing this?

https://jsfiddle.net/silosc/0emaydqn/11/

Here is my HTML folder:
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="report-card-sm">
    <h2>
       We're sorry, this page is under construction.
    </h2>
    <p>We reccomend you try the following:</p>
    <ul class="fa-ul">
        <li><span class="fa-li"><i class="fa fa-calendar" style="align-content: center "></i></span>Checking your date range and readjust it</li>
        <li><span class="fa-li"><i class="fa fa-file-text" style="align-content: center "></i></span>Importing your file by clicking on the Upload Data button</li>

    </ul>
    <br />
    <br />
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</div>

This is my CSS folder:

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul i {

  justify-content: center;
}

button {
  justify-contern: center;
}