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!
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments