javascript - Display:flex not working when added into my css no matter what I try

Question

My css and html looks like this:

#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>

Whenever I add flex or any other things along with it like justify content it doesn't do anything, and I have no idea what I am doing wrong. I feel like it's very simple but I can't figure it out. Thanks in advance!

question from:https://stackoverflow.com/questions/66056745/displayflex-not-working-when-added-into-my-css-no-matter-what-i-try

Answer 1

See if this is what you want. You need to set the width in ul and set it to the flex container. Then you are able to add the space-between .

For the css part, I use the SCSS so that you can write nesting css.