user244228 user244228 - 11 months ago 36
CSS Question

can't get rid of the spaces between the links

I'm trying to make a simple responsive navigation but i can't seem to eliminate the spaces inbetween the links. Any help would greatly be appreciated.

This is my code:

width:100%; text-align:centre; margin:0 auto;max-width:1010px;
.nav ul{
.nav li{
display:inline; list-style-type: none;border-right:#333333 1px solid;
.nav li:hover{

.nav a{
text-decoration:none; padding:10px; color:#000; font-family: sans-serif;
.nav a:hover{


<div class="nav"><!-- nav -->
<span class="menu-button"></span>
<ul class="clearfix menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>

Answer Source

I just switched your css a bit from display: inline to float: left for the li tags. Hope it helps, though float may not be the best approach here.

.nav li {
display: inline;


.nav li {
float: left;