Footer nav not centered

I'm having trouble getting my footer nav to centre properly. It's very simple but just not doing what it's supposed to.

.main-footer li {
  float: left;
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

I've tried adding display: block or display: inline-block in both css selectors but it didn't help. Any ideas?

Thanks, Kate

Solution

With float, you are forcing elements to be pulled towards the left. Use display:inline-block to make the element in center, as parent is already text-align:center

.main-footer li {
  display: inline-block;
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
  list-style-type:none
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>