Padding right issue

Question

I'm trying to achieve responsive design on a website. The issue I'm having is that I want the navigation menu to fit 100% to the total width, and there is some kind of right padding on the last element ("Equipo") that I want to remove, so the element gets to the border. How can I achieve that?

HTML:

<header class="mainHeader">
    <nav><ul>
        <li><a href="#" class="menuActual">Inicio</a></li>
        <li><a href="#">Obras</a></li>
        <li><a href="#">Personas</a></li>
        <li><a href="#">Búsqueda Avanzada</a></li>
        <li><a href="#">Equipo</a></li>
    </ul></nav>
</header>

CSS:

.mainHeader nav {
width: 100%;
height: 30px;
margin: 1% 0;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
width: 100%;
}
.mainHeader nav ul li {
float: left;
display: inline;
width: 20%;
}
ul {
padding-left: 0;
}
.mainHeader nav ul li a:link, .mainHeader nav a:visited {
width: 80%;
height: 22px;
display: inline-block;
padding: 4px 0;
text-align: center;
color:#FFFFFF;
background-color:#2e2e2e;
border-left:5px solid #2e2e2e;
}

Here's the link of the temporary web file: http://basevideoarte.com.ar/juan/responsivetemp/index.htm Thanks a lot!

Answer 1

Try this:

a {
width: 100%;
}

li {
width: 16%;
padding-right: 4%;
}

li:last-child {
padding-right: 0px;
}

I didn't look if you had additional margins or padding in there, but if so, adjust to accommodate those and this will solve you issue.