Excess padding/spacing inside div

programming web dev
1

Here’s an image for you to see the problem I have:

Here’s the css:

#Main #LogoContainer { /* Holds the logo and the site navigation links inside a container */
 margin: 45px 0 0 51px;
 width: 523px;
 display: table;
 text-align: left;
 background-color: #009933;
 border: 1px solid #33FF00;
}
#Main .Links { /* class given to an unordered list*/
 margin: 0;
 padding: 0;
 float: right;
}
#Main .Links li { /* makes the list sit horizontally */
 margin: 0;
 padding: 0;
 display: inline;
 background-color: #003366; /* the blue colour */
}
#Main .Links li a { /* Formats the actual links inside the logo container */
 padding: 0 5px 0 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #FFCC00;
 background-color: #CC33CC; /* the purple colour */
 border-right: 1px solid #FF0000; 
}

Right, I’ve simplified this by having various background colours on the li and a elements.

The problem is, where/why is there spacing underneath the image placeholder? Shouldn’t the ul sit right underneath the image and cover all of the green area above it? I guess a gap of approx 5px here.

Also, there’s another spacing…the blue spacing of the li…why doesn’t the li a element sit right up against it and cover the blue colour vertically?

Hmmm…fishy.