I am noticing a small gap between my navigation links, approximately 2px wide, and I am struggling to remove it. Is there any CSS code that can help with this?
Upon hovering over the "Downloads" link, you can see the space on the left side.
Check out the jsFIDDLE demo here: http://jsfiddle.net/asRz3/1/
HTML:
<?php
?>
<!DOCTYPE>
<html>
<head>
<!--- START Styles --->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
<link rel="stylesheet" href="index.css" type="text/css" />
<!--- END Styles --->
<!--- START Scripts --->
<script type="text/javascript" src"js/bootstrap.js"></script>
<!--- END Scripts --->
</head>
<body>
<!--- NavBar TOP --->
<nav class="navbar navbar-custom" role="navigation">
<a href="#" class="navbar-menu">F.A.Q's</a>
<a href="#" class="navbar-menu2">Latest News</a>
<a href="#" class="navbar-menu2">Downloads</a>
<a href="#" class="navbar-menu2">Client Login</a>
<a href="#" class="navbar-menu2">Contact Us</a>
</nav>
</body>
</html>
CSS:
.navbar-custom {
background-image: url('img/navbar-custom.png');
height: 60px;
border-radius: 0px;
margin-bottom: 0px;
}
.left-nav-space {
height: 70px;
width: 200px;
}
.navbar-menu {
height: 59px;
padding-left: 10px;
padding-right: 10px;
font-weight: 900;
font-size: 12px;
position: relative;
display:inline-block;
color: #FFF;
padding-top: 20px;
list-style: none;
padding-bottom: 24px;
text-align: center;
border-right: 2px solid #282828;
border-left: 2px solid #282828;
text-decoration: none !important;
}
.navbar-menu:hover {
background-image: url('img/navbar-menu-hover.png');
}
.navbar-menu2 {
height: 59px;
padding-left: 10px;
padding-right: 10px;
font-weight: 900;
font-size: 12px;
position: relative;
display: inline;
list-style: none;
color: #FFF;
padding-top: 20px;
padding-bottom: 24px;
text-align: center;
border-right: 2px solid #282828;
text-decoration: none !important;
}
.navbar-menu2:hover {
background-image: url('img/navbar-menu-hover.png');
}