I picked up some code from the net, but the bar is too wide for my needs, When I reduce the width from 80 to 40 (i got a line 40px long) the background shrinks but the text stays where it was, outside the box!

I've changed, one at a time, all I could and nothing happens. I expct there is some inherent code which is not there, and that I need to add something. I do not have experience for that. Can you help, please?

Here is the code:

body {
 background-color: #000;
 * {
 margin: 0;
 padding: 0;
 ul {
 list-style-type: none;
 background-image: url(navibg.png);
 height: 80px;
 width: 764px;
 margin: auto;
 li {
 float: left;
 ul a {
 background-image: url(Line.png);
 background-repeat: no-repeat; background-position: right;
 padding-right: 32px;
 padding-left: 32px;
padding-top:0px; display: block;
 line-height: 80px;
 text-decoration: none;
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 21px;
 color: #371C1C;
 ul a:hover {
 color: #FFF;