Can anyone solve this padding issue for me?

Question

The code is given below. Its still in progress. Touch the background button, you will see it does leave some white spaces at left and right. How do i Solve it?
https://code.sololearn.com/Wa60hJ1K98cq/?ref=app

Answer 1

I've minimally edited it:

https://code.sololearn.com/Wmyadxg2Q4Cq/?ref=app

after you've fixed yours I'll delete this

Answer 2

each <li> should have <a>
you should display <a> as a block, and set the width, padding, border-radius, and all that to <a>. Put <li> padding as 0.

Answer 3

HTML Section
<li><a class="background" href="#background">Background</a></li>
<li><a href="#">Journey</a></li>
<li><a href="#">Goals</a></li>
<li><a href="#">Habits</a></li>
<li><a href="#">Badges</a></li>
<li><a href="#">Tips</a></li>
<li id="background"><a href="#">Rate me</a></li>

CSS Section:
still editing

Answer 4

CSS Section:

li{
padding:0;
}

li a{
border-bottom:1px solid rgb(239,69,9);
display:block;
border-right:1px solid rgb(239,69,9);
border-radius:30px;
padding:5px;
overflow:hidden;
text-decoration:none;
}

li a:link, li a:visited
{
color:rgb(239,69,9);
}

li a:hover, a:active{
background-color:rgb(239,69,9);
color:white;
}

Answer 5

The problem is, that you've set the background color for the the link. When you change the background color of the <li> element it'll work

Answer 6

Alright you've edited it so I'm deleting my post

Answer 7

thanks, got it where i was wrong, but how can i specifically change the <li> color with link? can you alter my code and show plz!!

Answer 8

thank you so much......💖💖💖💖