CSS - Navigation

Question

I'm having an issue with the navigation links in my navbar. To start off, it's not aligned in the middle of the navigation bar as shown here:

and the other part is, I'm using padding to do this so if I put anything other than "test" or it in a different case, etc. It'll repeat the box. Code preview:

.menu {
background-image: url('../img/navbar_bg.png');
height: 65px;
width: 100%;
}
.menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url('../img/nav.png');
padding-top: 20px;
padding-bottom: 18px;
padding-right: 68px;
padding-left: 68px;
}
.menu a:hover {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url('../img/navhov.png');
padding-top: 20px;
padding-bottom: 18px;
padding-right: 68px;
padding-left: 68px;
}

<div class="menu">
<a href="">Test</a>
<a href="">Test</a>
<a href="">Test</a>
</div>

Answer 1

Made a few edits to you html to make it slightly better in terms of semantics. Mostly just needs an align center.

HTML

<nav class="menu">
  <ul>
    <li><a href="">Homepage</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</nav>

CSS

.menu {
  background-image: url('../img/navbar_bg.png');
  background:black;
  display:inline-block;
  height: 65px;
  text-align:center;
  width: 100%;
}
ul {
  display:inline-block;
  list-style:none;
  margin:0 auto;
  padding-top:4px;
  width:auto;
}
li {
  display:inline-block;
  margin-right:10px;
  width:160px;
}
.menu a {
  color: #FFFFFF;
  display:block;
  text-decoration: none;
  font-size: 14px;
  background-image:url('http://i.imgur.com/T07vDRX.png');
  padding-top: 20px;
  padding-bottom: 18px;
  width:160px;
}
.menu a:hover {
  text-decoration: none;
  background-image: url('../img/navhov.png');
}

Working link here...

http://codepen.io/alexbaulch/pen/HrAxl

Answer 2

Navs work well in lists. You can also set the links to display as block as give them set height/width with line-height.

 <nav>
    <ul>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul>
 </nav>

CSS

nav {
    width: 100%;
    text-align: center;
    background-image: url('../img/navbar_bg.png'); }

nav li {
    display: inline-block;
    list-style-type: none; }

.menu a {
        display: block;
        color: #FFF;
        text-decoration: none;
        font-size: 14px;
        width: 130px;
        height: 50px;
        line-height: 50px;
        background-image: url('../img/nav.png'); }