Navigation Links Overlapping - css

Question

So basically I want my navigation bar to be fixed when I scroll the page down. But by changing its position from absolute to fixed, the links seem to overlap each other. Margin and Padding aren't working. How can I make them fixed and give some gap between each link? If there is something wrong with my code please correct me.
HTML
.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;
}
<div class="container">
<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">Home</li>
<li class="list_item">Donate</li>
<li class="list_item">About us</li>
<li class="list_item">Contact</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>

Answer 1

The main problem I could see with your css was the bottom:910px; and left:1500px positioning : you don't know how big the user's screen is going to be (I couldn't see the nav initially! ) I commented them out for a start, moved your margin for the list items into the list_item_1 css (shorthand for margin order is top right bottom left - clockwise - so I wrote it shorthand integrating the margin-bottom of 5px). Also, I added a display:inline-block; to your nav li.
Another (important) point to mention is that I moved your nav a code to AFTER your nav/ nav ul/nav li/ css, as css is read in the order it is written. As such, you should keep your css in logical order.
Hope this helps
.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_bar {
font-size: 20px;
}
nav {
display: inline-block;
position: sticky;
/* bottom: 910px;*/
/*left: 1500px;*/
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.list_item_1 {
margin: 12px 12px 5px 12px;
padding: 10px;
}
nav li {
display:inline-block;
/* margin: 12px 12px 5px 12px;*/
}
nav a {
display:inline-block;
float: left;
margin-left: 20px;
text-decoration: none;
text-transform: uppercase;
font-family: "Verdana", BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
font-weight: 800;
color:#000000;
}
nav a:hover {
background-color: pink;
}
#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;
}
<div class="container">
<div id="elem_1">
<h1>RDMC</h1>
<img src="./Images/HeartBeat.png">
<input type="checkbox" id="three_bars">
<nav>
<ul id="nav_bar">
<li class="list_item_1">Home</li>
<li class="list_item_1">Donate</li>
<li class="list_item_1">About us</li>
<li class="list_item_1">Contact</li>
</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>