+ 1

Can anyone solve this padding issue for me?

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

28th Jul 2017, 8:37 PM
Shehzad
Shehzad - avatar
8 Réponses
+ 1
I've minimally edited it: https://code.sololearn.com/Wmyadxg2Q4Cq/?ref=app after you've fixed yours I'll delete this
28th Jul 2017, 9:23 PM
God Usopp
God Usopp - avatar
+ 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.
28th Jul 2017, 9:01 PM
God Usopp
God Usopp - avatar
+ 2
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
28th Jul 2017, 9:07 PM
God Usopp
God Usopp - avatar
+ 2
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; }
28th Jul 2017, 9:16 PM
God Usopp
God Usopp - avatar
+ 1
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
28th Jul 2017, 8:43 PM
Nick Lamprecht
Nick Lamprecht - avatar
+ 1
Alright you've edited it so I'm deleting my post
29th Jul 2017, 7:17 AM
God Usopp
God Usopp - avatar
0
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!!
28th Jul 2017, 8:46 PM
Shehzad
Shehzad - avatar
0
thank you so much......💖💖💖💖
29th Jul 2017, 7:18 AM
Shehzad
Shehzad - avatar