CSS navigation bug

Question

I'm having trouble creating a horizontal navigation. My problem is when I want to mess around with the UL & UL's list items' margin and padding.

These are the problems I am having:

1. When I try to change the -top & -bottom properties it seems as though I can barely get the UL's margin-top to move the list items down.

2. When I use the -right and -left properties of margin and padding I get crap sticking out of the navigation. I have tried changing the width to overcome this, but it hasn't helped.

HTML & CSS CODE PROVIDED BELOW:

<div id="HorizNav">
  <ul>
    <li><a href="#">Link #1</a></li>
    <li><a href="#">Link #2</a></li>
    <li><a href="#">Link #3</a></li>
    <li><a href="#">Link #4</a></li>
  <ul>
</div>

#HorizNav ul {
  float: right;
  text-Align: left;
  width: 660px;

  background: #ff0000;
  color: #fff;
  font-size: 1.5em;

  padding-top: 0px; padding-bottom: 0px;
  padding-left: 5px; padding-right: 5px;
}

#HorizNav ul li { display: inline; }

#HorizNav ul li a {
  text-decoration: none;
  background-color: #0000ff;
  color: #fff;
}

Please help. Thanks in advance.

Answer 1

You don't have a closing ul tag. The second <ul> should be </ul>

I think you're looking for box-sizing: border-box;.

#HorizNav ul {
    ...
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
   ...
}

Demo