0

I'm trying to center the area holding the Fitness Assessmeent Pre-Test. Any ideas on why I can't get it to center will be much appreciated.

Here is a fiddle: https://jsfiddle.net/bigtime/ofcgphrm/

Here is a screenshot from my pc: enter image description here

Here is a screenshot from my phone: enter image description here

<section class="alert alert-success" role="region" aria-label="Activity Information" style="color: #458bc4;">
  <div class="row">
    <div class="col-sm-12">
      <div class="card-box p-3">
        <div class="row">
          <div class="col-md-6 col-sm-6  my-auto">
            <div class="py-3 border-right text-center">
              <h3 class="mt-1 text-primary fw-bolder"><em class="text-primary fw-bolder mdi mdi-calendar-text"></em> 98.6%</h3>
              <p class="text-muted">Current Activity Grade</p>
            </div>
          </div>
          <div class="col-md-6 col-sm-6  my-auto">
            <div class="text-center py-3 d-flex justify-content-center ">
              <ul>
                <li class="list-group-item text-primary fw-bolder">Fitness Assessment Pre-Test:<br>
                  <em class="text-primary mdi mdi-thumb-up-outline"></em> Completed </li>
                <li class="list-group-item text-primary fw-bolder">Fitness Assessment Post-Test:<br>
                  <em class="text-primary fw-bolder mdi mdi-thumb-up-outline"></em> Completed </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--end row -->
</section>
Tim M
  • 306
  • 3
  • 18
  • 1
    Check the `padding` – Shuvo Feb 01 '21 at 04:10
  • 1
    it's working properly in reproduce fiddle: https://jsfiddle.net/ebngfz8L/ – Minal Chauhan Feb 01 '21 at 04:12
  • I added my css to the fiddle and included it into my post. I added all of the css because I don't know which is causing my issue. When viewing the fiddle with my css, you can see the list box is further to the right than it should be. – Tim M Feb 01 '21 at 04:19
  • 2
    the `ul` has a `padding-left` inherited from **Boostrap**. You can set the `padding-left` to `0`. Hopefully, it will help – Shuvo Feb 01 '21 at 04:27

1 Answers1

1

There is a padding-left set to ul. You can remove that padding:

<ul class="pl-0">
  <li class="list-group-item text-primary fw-bolder">Fitness Assessment Pre-Test:<br>
    <em class="text-primary mdi mdi-thumb-up-outline"></em> Completed
  </li>
  <li class="list-group-item text-primary fw-bolder">Fitness Assessment Post-Test:<br>
    <em class="text-primary fw-bolder mdi mdi-thumb-up-outline"></em> Completed
  </li>
</ul>
Shuvo
  • 1,253
  • 9
  • 18