Here is the structure of my CSS and HTML:
#TopBar{
display: flex;
justify-content: space-between;
z-index: 1;
position: fixed;
top: 0px;
left: 0px;
background-color: rgb(25,25,25);
height:115px;
width: 2000px;
}
#Logo{
top: 0px;
height: 110px; width: 110px;
display: inline-block;
z-index: 2;
background-size: contain;
}
.NavList{
color: grey;
text-decoration: none;
font-family: Arial;
font-size: 30px;
margin-top: 1.3%;
z-index: 3;
}
<div id = TopBar>
<ul style = "list-style-type:none;">
<a class = NavList id = NavHome href = "../index.html">HOME</a>
<a class = NavList id = NavLogin href = "AccountPage.html" onclick =
"account()">ACCOUNT</a>
<a class = NavList id = NavAccount href = "../Rules
Page/Rules.html">RULES</a>
<a class = NavList id = NavDark href = "FillerPage.html">LIGHT</a>
</ul>
</div>
<a href="https://google.com"><img src="../Images/VenomLogo5.png" id = "Logo">
</img></a>
</div>
</head>
I've been struggling to apply flex properties like justify-content as it seems not to be working along with other styles I add. I'm sure it's a simple mistake on my end but I just can't seem to figure it out. Any help would be greatly appreciated - thank you!