CSS - Horizontal Nav Bar has undesired second row

I am stuck with the next problem using CSS grid: My nav bar got a really weird second row and I dont understand how. The HTML for the bar is:

<div class="nav">

        <ul> 
            <li><a href="#">Start</li>
            <li><a href="#">Standort</li>
            <li><a href="#">Preise</li>
            <li><a href="#">Turniere</li>
            <li><a href="#">Gallerie</li>
            <li><a href="#">Impressum</li>
        </ul>

    </div>

And the CSS:

ul {
    list-style-type: none;
    background-color: lightblue;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

ul li {
    float: left;
    position: relative;
}

li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    font-family: helvetica;
    padding: 15px 55px;


}

li a:hover{
    background-color: #0ef421; 
}

The grid it is nested in with the nav class:

.container {
    display: grid;
    grid-template-columns:  15% 70% 15%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    grid-gap: 2px;
    grid-template-areas:
        'banner banner banner'
        'nav nav nav'
        'sidebar content fb'
        'sidebar content fb'
        'src src src';
}

.nav {
    grid-area: nav;
    justify-self: center;
}

Not finished yet. Here what it is looking like now:

Below "Start" is nothin you can click, but the rest:

It really freaks me out because I did these nav bar style several times and never encountered such weird behaviour. The only thing that changed is that I am using CSS grid due to its convenience but nevertheless the bar was wrapped in a kind of other div in prior projects.

As soon as I add any top or bottom padding, this happens.

Every help is much appreciated! Thanks in advance :)