bootstrapでブロック内の要素を中央揃えに出来ません。

Question

ブロック内のテキストをブロック内の中央にするにはどうすれば良いですか？
(青の一に持っていきたいと思っています。)
また赤枠の左と下スキマが出来てしまい、フッターとテキストの高さが合いません。
どうすれば直りますでしょうか？
ググったのでですがブロック内の要素の中央揃えにする方法が見つかりませんでした。
また検証モードでボートストラップのrowにmarginがあることが確認出来ましたが、
自分のcssファイルでmargin:0；としても上書きされませんでした。
よろしくお願いします。

<footer class="footer">
  <div class="footer-cover container">
    <ul class="footer-list row ml-auto ">
      <li class="col-lg-3 align-self-center"><a>はじめての方へ</a></li>
      <li class="col-lg-3 align-self-center"><a>よくあるご質問</a></li>
      <li class="col-lg-3 align-self-center"><a>利用規約</a></li>
      <li class="col-lg-3 align-self-center"><a>プライバシーポリシー</a></li>
      <li class="col-lg-3 align-self-center"><a>サイトマップ</a></li>
      <li class="col-lg-3 align-self-center"><a>会社情報掲載のお願い</a></li>
      <li class="col-lg-3 align-self-center"><a>運営会社</a></li>
      <li class="col-lg-3 align-self-center"><a>採用情報</a></li>
    </ul>
  </div>
</footer>

 footer {
    background-color: gray;
  }
.footer-cover {
  max-width: 1060px;
  border: 2px solid red;
}
.footer-list {
  display: flex;
  justify-content: center;
  list-style: none;
}
.footer-list .row ul {
  margin-bottom: 0 auto;
}

.footer-list li {
  padding:0 10px;
  border: 2px solid red;
  font-weight:bold ;
  color:white;
}

Answer 1

このように書き換えたら上手くいきました。

.footer {
  height: auto;
  background-color:gray;
  transition: all 0.8s;
  &-cover {
    max-width: 1140px;
    margin:0 auto;
  }
  ul{
    display: flex;
    list-style: none;
    justify-content: center;
    // line-height: 40px;
    }
    li{
      margin:0 auto;
      padding:0 10px;
      font-weight: bold;
      color:#fff;
      cursor: pointer;
      display:block;
      &:hover{
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }
.footer-list {
  margin-bottom: 0px;
}