我的网站页脚中没有可用的取消订单列表？

如何解决我的网站页脚中没有可用的取消订单列表？

我正在创建一个网站，并希望将联系信息放在页脚中。我使用多个嵌套的div创建了页脚：一个页脚div->页脚容器div->页脚左div和页脚右div（使用display：flex，我将它们彼此并排放置）。页脚左div包含外部链接的ul（无序列表）；页脚右div包含社交媒体图标。我已包含以下代码：

.footer {
  height: 150px;
  width: 100vw;
  background-color: #7D594F;
}

.footer-container {
  display: block;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  border: 2px solid red;
}

.footer-left ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  border: 2px solid blue;
}

.footer-left ul li {
  color: #ffffff;
  font-family: montserrat,sans-serif;
  text-shadow: none;
  text-align: center;
  margin: 0px;
  width: 150px;
  border: 2px solid green;
}

.footer-right {
  display: flex;
  justify-content: center;
  align-items: center;
}


/*to scale down the icons,the #facebook should always be 10px bigger than the #instagram*/

#facebook {
  height: 40px;
  width: 40px;
}

#instagram {
  height: 30px;
  width: 30px;
}

.footer p {
  color: #ffffff;
  font-family: montserrat,sans-serif;
  font-size: 10px;
  text-align: center;
}

<div class="footer">
  <div class="footer-container">
    <!--Using flex to push both containers on opposite sides of the footer-->
    <div class="footer-left">
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#hiring">We Are Hiring</a></li>
        <li><a href="https://hgicrusade.com/">Our Financial Services</a></li>
        <li><a href="https://checkout.wearelegalshield.com/distinctive7?utm_source=ls-info.com&utm_medium=referral&utm_campaign=user_distinctive7">Our Legal Services</a></li>
        <li><a href="http://www.distinctivelyhealthyliving.com/">Kangen Water</a></li>
      </ul>
    </div>
    <div class="footer-right">
      <a href="#facebook"><img id="facebook" src="/images/icons/noun_social media icon_2255034.png" alt="Link to Facebook"></a>
      <a href="#instagram"><img id="instagram" src="/images/icons/noun_instagram_3350460.png" alt="Link to Instagram"></a>
    </div>
  </div>
</div>

但是无序列表是不可见的。我在每个元素周围创建了边框，以使其更易于可视化：

解决方法

body {
  margin: 0;
}

.footer {
  height: 150px;
  width: 100vw;
  background-color: #7D594F;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  border: 2px solid red;
}

.footer-left ul {
  display: flex;
  /*flex-flow: column nowrap;*/
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 2px solid blue;
}

.footer-left ul li {
  color: #ffffff;
  font-family: montserrat,sans-serif;
  text-shadow: none;
  text-align: center;
  margin: 0px;
  padding: .5em 1em;
  width: 150px;
  border: 2px solid green;
}

.footer-right {
  display: flex;
  justify-content: around;
  align-items: center;
}


/*to scale down the icons,the #facebook should always be 10px bigger than the #instagram*/

#facebook {
  height: 40px;
  width: 40px;
}

#instagram {
  height: 30px;
  width: 30px;
}

.footer p {
  color: #ffffff;
  font-family: montserrat,sans-serif;
  font-size: 10px;
  text-align: center;
}

<div class="footer">
  <div class="footer-container">
    <!--Using flex to push both containers on opposite sides of the footer-->
    <div class="footer-left">
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#hiring">We Are Hiring</a></li>
        <li><a href="https://hgicrusade.com/">Our Financial Services</a></li>
        <li><a href="https://checkout.wearelegalshield.com/distinctive7?utm_source=ls-info.com&utm_medium=referral&utm_campaign=user_distinctive7">Our Legal Services</a></li>
        <li><a href="http://www.distinctivelyhealthyliving.com/">Kangen Water</a></li>
      </ul>
    </div>
    <div class="footer-right">
      <a href="#facebook"><img id="facebook" src="/images/icons/noun_social media icon_2255034.png" alt="Link to Facebook"></a>
      <a href="#instagram"><img id="instagram" src="/images/icons/noun_instagram_3350460.png" alt="Link to Instagram"></a>
    </div>
  </div>
</div>