Having options on both side of a menu - html

Question

I am a beginner at HTML, and I was trying to make a web page to gain experience. I wanted to create this menu but I want it to have options on both sides of it. Just like the HOME, ABOUT ME, etc. options is on the right side, I want similar options on the left side too but am not able to figure it out. Any help would be greatly appreciated.
The HTML code:
<div id="menu">
<nav class="navl" style="justify-content: right">
<ul>
<li class="navulli">
<a href="C:\Users\vivek\Desktop\html-css-course\LegendsOfTime\LOT_Home.html">
Home
</a>
</li>
</ul>
</nav>
</div>
The CSS code:
#menu {
width: 100%;
height: 30px;
background-size: cover;
justify-content: right;
margin: 0px;
padding: 0px;
}
.navl {
width: 100%;
height: 150%;
line-height: 10px;
margin-right: 60px;
display: flex;
background-color: black;
opacity: 0.6;
margin: 0px;
}
.navulli {
display: inline-block;
transition: 0.7s all;
font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
place-items: left;
margin: 0px;
}
.navulli:hover {
opacity: 0.4;
height: 20px;
border-radius: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 30px;
justify-content: right;
font-size: calc(1rem + 0.2vw);
margin-top: 0px;
}
i {
text-decoration: none;
color: white;
justify-content: right;
padding: 15px;
font-size: calc(1rem + 0.5vw);
margin-top: 0px;
}

Answer 1

One possible solution would be to use a flexbox with justify-content: space-between;
nav {
background: silver;
padding: 1em;
display: flex;
justify-content: space-between;
}
nav ul {
display: inline-block;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
display: inline;
margin: 0 1em;
}
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</nav>