html - CSS center ul while li are text-align left

Question

I have an unorder list that I am trying to center, while keeping the list items text-align left so they look nice and neat. I have no idea how to do this without assigning a width and using margin: o auto, my question is, is there a better way to center the unorder list while having the list items text-align: left?

---

ul.step-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    ul.step-list li {
        flex: 0 0 33.333333%;
        text-align: left;
    }
    
    /* The container */
    .checkbox-container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Hide the browser's default checkbox */
        .checkbox-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* On mouse-over, add a grey background color */
    .checkbox-container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .checkbox-container input:checked ~ .checkmark {
        background-color: #1f355e;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .checkbox-container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .checkbox-container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

<ul class="step-list">
  <li>
    <label class="checkbox-container">
      <span class="lbl">33' Lot Collection</span>
      <input type="checkbox" id="type" value="7">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">36' Lot Collection</span>
      <input type="checkbox" id="type" value="8">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">40' Lot Collection</span>
      <input type="checkbox" id="type" value="11">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">46' Lot Collection</span>
      <input type="checkbox" id="type" value="17">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">50' Lot Collection</span>
      <input type="checkbox" id="type" value="18">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Back To Back</span>
      <input type="checkbox" id="type" value="14">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Semi Collection</span>
      <input type="checkbox" id="type" value="13">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Towns 2 Storey</span>
      <input type="checkbox" id="type" value="9">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Towns 3 Storey</span>
      <input type="checkbox" id="type" value="15">
      <span class="checkmark"></span>
    </label>
  </li>
</ul>

question from:https://stackoverflow.com/questions/65837841/css-center-ul-while-li-are-text-align-left

Answer 1

ul.step-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin:0 auto;
    width:66%; /*For example*/
    background:red; /*To highlight*/
}

Margin:0 auto, and UL width...

JSFiddle: http://jsfiddle.net/zg1jLx9s/