html - CSS infline-flex : text overlap

Question

我正在尝试制作一个 footer，左侧是我的名字，home、portfolio 和 contact 右边的链接。但是我的链接相互重叠，我不知道是什么原因造成的。我试过 justify-content:space-around 但它们仍然重叠，而且我完全卡住了，因为我是 CSS 的新手。

问题图片

HTML:

<div class="footer-nav">
        <h3>Name</h3>
        <ul class='nav'>
            <li><a href="#">Home</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>

        </ul> 
    </div> <!-- end of div class "footer-nav"-->

CSS:

.footer-nav {
    border-top: 1px solid lightgrey;
    padding: 1.5625em 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.footer-nav h3 {
    display: inline-flex;
    font-size: 1em;
    padding-right: 6.7em;
    list-style-type: none;

}
.nav{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 0px;
    padding-right: 0px;
}

Answer 1

只需添加边距，然后试试这个:

.footer-nav {
  border-top: 1px solid lightgrey;
  padding: 1.5625em 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.footer-nav h3 {
  display: inline-flex;
  font-size: 1em;
  padding-right: 6.7em;
  list-style-type: none;
}

.nav {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 0px;
  padding-right: 0px;
}

li {
  margin: 0 20px;
}

<div class="footer-nav">
  <h3>Name</h3>
  <ul class='nav'>
    <li><a href="#">Home</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>

  </ul>
</div>
<!-- end of div class "footer-nav"-->