Can't get rid of gap between elements

Question

I'm trying to make the navigation bar appear below the header, with rounded corners. I'm using the following HTML:

<header>
<span>Header Text</span>
</header>
<nav>
<a href="#">Test</a>
<a href = "./login.html">Log In</a>
</nav>
</code>

and the following CSS:

            header {
                width:100%;
                text-align:center;
                background-color: grey;
                color:white;
                font-size: xx-large;
                margin:0;
                border-radius: 15px;
            }

            nav {
                width:100%;
                text-align:center;
                margin-top: 0;
                margin-bottom: 20px;
                
            }

            nav > * {
                background-color: grey;
                padding-top: 10px;
                padding-bottom: 10px;
                text-align: center;
                margin:0;
                
            }

            nav a:first-child {
                margin:0;
                padding-left:15px;
                border-radius:0 0 0 15px;
            }

            nav a:last-child {
                margin:0;
                padding-right: 15px;
                border-radius:0 0 15px 0;
            }

            nav a {
                margin:0;
                text-decoration: none;
            }

I get this as the result. I think I can fix the vertical alignment with padding in header, but I can't seem to get rid of the gap between the two nav links. Can anyone help?