I am completely stumped - I am following along on an online course and cannot pick what is different to my teacher.
I am attempting to have a green colored box over each of the links when you hover over them. Currently I get the box but only to the left of the link
Tried to share full HTML and CSS but too large, question wouldn't post. Please let me know if you need more information thanks
#navbar {
display: flex;
position: sticky;
top: 0;
background: #333;
color: #fff;
justify-content: space-between;
z-index: 1;
padding: 1rem;
}
#navbar ul {
display: flex;
align-items: center;
list-style: none;
}
#navbar ul li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
#navbar ul li a:hover {
background: #93cb52;
border-radius: 5px;
}<nav id="navbar"><h1 class="logo"><span class="text-primary"><i class="fas fa-book-open"></i> Edge </span>Ledger</h1><ul><li><a href="#home"></a>Home</li><li><a href="#what"></a>What</li><li><a href="#who"></a>Who</li><li><a href="#contact"></a>Contact</li></ul></nav>