I'm struggling to eliminate the spacing between the li items in my navigation bar. Even after setting margin: 0px for both the item and anchor (link), the gap still persists. How can I get rid of these spaces?
/* navigation styles */
nav {
background: rgba(6, 19, 72, 1);
background: linear-gradient(to bottom, rgba(6, 19, 72, 1) 0%, rgba(15, 31, 91, 1) 100%);
}
.nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
margin: 0px;
}
nav ul.nav {
width: 1120px;
margin: 0 auto;
min-width: 120px;
}
span.homeicon {
width: 35px;
height: 32px;
display: inline-block;
vertical-align: middle;
position: relative;
background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
background-size: cover;
}
.nav a {
display: inline-block;
padding: 10px;
width: 120px;
text-decoration: none;
color: white;
font-family: arial;
line-height: 30px;
height: 30px;
margin: 0px;
border: 1px solid #344da7;
border-top: none;
}
a.nav_home {
max-width: 50px;
width: 50px !important;
}
.nav a:hover {
background-color: #344da7;
height: 100%;
}