Navigation bar links stacking on each other

Im trying to build my website for my school project and im trying to make the navigation bar using flexbox. Everything else is working fine but for some reason the links Tietoa, Usein ja Yhteyttä are stacking on each other and I cant get it to work. I've tried adding the display flex and content justify in the nav and ul links but it still doesnt work

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"
        
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css"
    </head>
    <body>
        <header>
            <img class="logo" src="logo.png" alt="logo">
            <nav>
                <ul class="nav_links">
                    <li><a href="#">Tietoa</a></li>
                    <li><a href="#">Usein</a></li>
                    <li><a href="#">Yhteydet</a></li>
                </ul>
            </nav>
            <a class="cta" href="#"><button>yhteyttä</button></a>
        </header>
    </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
body {
    background-color: #F5F5F5;
    color: black;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: 1px solid red;
    
}

li, a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: black;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
    background-color: white;
    box-shadow: 0px 2px 5px lightgray;
}

.logo {
    cursor: pointer;
    width: 100px;
    height: 100px;
}

.nav__links {
    list-style: none;
    display: inline-block;
}

.nav__links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav__links li a {
    transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
    color: #0088a9
}

button {
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover {
    background-color: rgba(0, 136, 169, 0.8);
}