Navigation Links Overlapping

So basically I want my navigation bar to be sticky when I scroll the page down. But by changing its position from absolute to sticky, the links seem to overlap each other. Margin and Padding aren't working. How can I make them sticky and give some gap between each link? If there is something wrong with my code please correct me.

HTML

<div id="elem_1"><h1>RDMC</h1>
    <img src="./Images/HeartBeat.png">
    <input type="checkbox" id="three_bars">
    <nav>
    <ul><span id="nav_bar">
        <li class="list_item_1"><a href="#">Home</a></li>
        <li class="list_item"><a href="#">Donate</a></li>
        <li class="list_item"><a href="#">About us</a></li>
        <li class="list_item"><a href="#">Contact</a></li></span>
    </ul>
</nav>
<label for="three_bars" id="three_bars_label">
    <span><i class="fas fa-bars"></i></span>
</label>
 </div> 

<div id="elem_2">Content</div>
<div id="elem_3">Payment</div>
<div id="elem_4">Address</div>
<div id="elem_5">Contact</div>
</div>

CSS

.container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(12,1fr);
        width: 500px;
        height: 500px;
        grid-gap: 10px;
        background-color: white;
        width: 100%;
        height: 1500px;
        justify-content: center;
    }

    span {
    font-size: 30px;
    cursor: pointer;
    }

    #elem_1 {
        background-color:#F7F7F7;
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        width: 100%;
    }

     #elem_1 > img {
        width: 2.3vw;
        height: 4vh;
        position: relative;
        left: 220px;
        bottom: 9px;
    }

#elem_1 > h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #505050;
    position: relative;
    left: 120px;
    top: 30px;
}
nav a {
    position: sticky;
    right: 200px;
    float: left;
    margin-left: 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 800;
    color: grey;

}
#list_item_1 {
    margin: 20px;
    padding: 20px;
    }
#nav_bar {
    font-size: 20px;

}

nav a:hover {
    background-color: pink;
}
nav{
    display: block;
    position: absolute;
    bottom: 910px;
    left:  1500px;
    width: 100%;


}
nav ul  {
 margin: 0;
 padding: 0;
 list-style: none; 

}
nav li {
    margin-bottom: 5px;
    margin: 12px;
}
#three_bars {
    display: none;
}
#three_bars:checked ~ nav {
    display: block;
}
#three_bars_label {
    position: fixed;
    right: 35px;
    top: 35px;
}

    #elem_2 {
        background-color: greenyellow;
        grid-column: 1 / -1;
        grid-row: 2 / 3;
    }
    #elem_3 {
        background-color: aliceblue;
       grid-column: 1 / 9;
       grid-row: 3 / 12;
    }
    #elem_4 {
        background-color: antiquewhite;
        grid-column: 9 / -1;
        grid-row: 3 / 12;
    }
    #elem_5 {
        background-color: aquamarine;
        grid-column: 1 / -1;
        grid-row: 12 / -1;
    }


</style>