Trying to create a navigation bar with anchors aligned on the left and right sides. However, the second anchor in each div is displaying below the first one.
Despite searching online for solutions and attempting various fixes, none of them seem to work.
body {
background-color: #ec1320;
color: #ec1320;
}
.nav-bar {
background-color: #1524ea;
color: white;
height: 100px;
position: absolute;
width: 100%;
height: 8%;
left: 0px;
top: 0px;
}
.nav-link {
color: #d0d0d0;
font-size: 20px;
position: relative;
margin-top: 5px;
}
.nav-link:hover {
color: gray;
}
.nav-head {
color: white;
font-size: 30px;
margin-top: -4px;
}
.nav-head:hover {
color: gray;
}
.left-nav {
position: absolute;
left: 0px;
}
.right-nav {
position: absolute;
right: 0px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<header>
<nav class="nav-bar">
<div class='container'>
<div class="left-nav">
<a href="index.html" class='nav-item nav-head nav-link'>Gamer Blog</a>
<a href='index.html' class='nav-item nav-link'>Home</a>
</div>
<div class="right-nav">
<a href='login.html' class='nav-item nav-link'>Login</a>
<a href='register.html' class='nav-item nav-link'>Register</a>
</div>
</div>
</nav>
</header>
</body>In need of assistance to ensure that all anchors are positioned beside each other within their respective parent divs.