navigation bar entire width spaced items evenly

css

Solution

I'd rework your CSS like this jsFiddle example.

CSS

ul.nav {
    width:100%;
    margin:0 auto;
    padding:0;
    list-style:none;
    background-color:#62564A;
    text-align:center;
    font-family: sans-serif; 
}
.nav li { 
    display:inline-block;
    width:33%;
    margin:0;
    padding:0;
}
.nav a {
    text-align:center;
    padding:12px 0 13px 0;
    margin:0;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    display:block;
}
.nav a:hover { 
    background:#A26A42;
    border:none;
}

ul.nav li:first-child a{
    border:none;
}
ul.nav li:last-child a {
    border:none;
}​

Problem

I'm a bit new to css. I'm trying to make a horizontal navigation bar with only 3 text items for mobile device viewing. I have width set to 100% and each section width set to 32% (I tried 33% but it would place the 3rd item on a new line.) It looks ok as it is, but when I hover (or click on using a mobile device) the background color changes and you can see the margins. ``` ul.nav { width:100%; margin:0 auto; padding:0; list-style:none; display:inline-block; background-color:#62564A; text-align:center; font-family: sans-serif; } .nav li { display:inline; } .nav a { width:33%; text-align:center; display:inline-block; padding-bottom:13px; padding-top:12px; border-left: 1px solid #fff; border-right: 1px solid #fff; } .nav a:hover { background:#A26A42; border:none; width:32% } ul.nav li:first-child a{ border:none; } ul.nav li:last-child a { border:none; } ``` End of CSS ``` <ul class="nav"> <li><a href="#">Search</a></li> <li><a href="#">Legend</a></li> <li><a href="#">Info</a></li> </ul> <div id="map_canvas" style="position:absolute;left:0;right:0;"></div> ``` Thank you for any help.

Original source