1 reply [Last post]
howardlie's picture
Last seen: 6 years 20 weeks ago
Timezone: GMT+7
Joined: 2016-09-14
Posts: 1
Points: 2

I made a table-like ul and li for my website's categories. When I use Tryit Editor. I use this code:
html :

ul.kateg {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: transparent;
    border: 1px solid #b7ac0f;
li.cat a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
li.cat {
    text-align: left;
    border-bottom: 1px solid #b7ac0f;
li.cat:last-child {
    border-bottom: none;
li.cat a.active {
    background-color: #b7ac0f;
    color: white;
li.cat a:hover:not(.active) {
    background-color: transparent;
    color: green;
<ul class="kateg">
  <li class="cat"><a class="active">Home</a></li>
  <li class="cat"><a href="#news">News</a></li>
  <li class="cat"><a href="#contact">Contact</a></li>
  <li class="cat"><a href="#about">About</a></li>

output :

^^^I don't know why there are so many spaces here^^^

and I wanted it to look that way but when I copy it to my WordPress site, it looks like this.

The problem is with the home background as you can see, the background is not full. Is there any mistakes in my code? Please help me Smile I am a beginner in CSS

Thank you.

Tony's picture
Last seen: 3 days 16 hours ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

HI howardlie, You have the

HI howardlie,
You have the background color on the Link.
So to remove the spacing you need to remove the padding from the LI or put the background-color on the LI.