Tell us what’s happening:
Right before I set the display property of li to block, I can see that they are acting list elements and have bullet points of the color #dfdfe2. As soon as I set the display property to block the bullet points disappear (picture of before and after attached). Why is this happening? I don’t understand.
Before

After

PS. If you need the entire code, please let me know. I’ll edit the post or share it in the comments. I just didn’t share it all because it felt more of a hindrance than help for the readers. Also, thanks in advance ![]()
Your code so far
<!-- html-->
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
/*css*/
nav li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0
Challenge Information:
Learn Accessibility by Building a Quiz - Step 45