Please help me with my error

Please, post real text, not images of it. Also explain the problem you want help with.

<div class="navbar">
<ul>
<li><a href="https://w3schools.com" class="active">Column 1 <span>Holy Grail</span></a></li>
<li><a href="https://facebook.com">3 Column <span>Column 2 </span></a></li>
<li><a href="https://yahoo.com.com">2 Column <span>Column 3 </span></a></li>
</ul>
</div>


------------------------------------------------------------------------------------
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar li {
display: inline-block;
margin-right: -4px;
}

.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}

/* Style the links inside the navigation bar */
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}

/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;

OK. And in what way doesn't it work as you expect?

IT doesn't have the block behind it nor are the bulliets removed.

Well, then the real thing differs from what you posted. The only error I see in the CSS is that you lack the closing curly after the last rule, but that's probably a mistake when copy-pasting.

This is what I see.

Click to view attachment