Troubleshooting a CSS template with padding and margin discrepancies

Question

I have a question regarding my code:

Within my code, I am attempting to accomplish three tasks but I seem to be encountering some difficulty.

Eliminate padding below "admin" (where you see the green background)
Get rid of padding above the list (where you see the green background)
Add a 1px space on the left side of each list item (to reveal the green background).

Despite applying the following code, I am unsure of where the extra space is originating from:

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

In an attempt to create the 1px space between each list item, I implemented the code below, however it does not appear to be functioning as expected:

#header ul li {
padding-left: 1px;
}

Could someone kindly point out where I may be making an error? Thank you!

Answer 1

Answer №1

Your excessive spacing is caused by the following CSS rule

#header h1, #header ul, #header ul li {
    ...
    background: white;
    padding: 5px 12px;
}

Notice how you are adding padding to both ul and its li children within the ul? This cumulative effect results in extra space.

The lack of a green background is due to setting the entire ul background to white with the same rule.

You can also experiment with changing padding-left on li elements to margin-left:

#header li{
    margin-left: 10px
}

Answer 2

Your excessive spacing is caused by the following CSS rule

#header h1, #header ul, #header ul li {
    ...
    background: white;
    padding: 5px 12px;
}

Notice how you are adding padding to both ul and its li children within the ul? This cumulative effect results in extra space.

The lack of a green background is due to setting the entire ul background to white with the same rule.

You can also experiment with changing padding-left on li elements to margin-left:

#header li{
    margin-left: 10px
}