CSS infline-flex: text overlap

I am trying to make a footer with my name on the left side and my home , portfolio, and contact links on the right. But my links overlap with each other and I don't know what's causing this. I have tried justify-content:space-around but they still overlap, and I am completely stuck since I am new to CSS.

Picture of problem

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;
}