# Beginners question

**URL:** <https://forum.kirupa.com/t/beginners-question/254918>\
**Category:** Uncategorized\
**Created:** [March 17, 2008, 11:12am UTC](https://forum.kirupa.com/t/beginners-question/254918 "2008-03-17T11:12:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![lilleypants](https://avatars.discourse-cdn.com/v4/letter/l/f17d59/32.png) [@lilleypants](https://forum.kirupa.com/u/lilleypants)\
**Post date:** [March 17, 2008, 11:12am UTC](https://forum.kirupa.com/t/beginners-question/254918/1 "2008-03-17T11:12:18Z")

</div>

I am building up my protifilio and have never really done CSS before. I am creating this menu and the problem I get with it is that it keeps on sticking gaps inbetween each option like so:

![](http://www.katylilley.co.uk/menu.jpg)

The CSS code is like this:

```auto
#navigation{
font-size:11px;
}
#navigation ul{
list-style:none;
margin:0px;
padding:0px;
padding-top:1em;
}
#navigation li{
display:inline;
padding:0px;
}
#navigation a:link, #navigation a:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
padding:0.2em 10px 0.2em 1.4em;
color:#ffffff;
background-image:url(arrow.gif);
background-repeat:no-repeat;
background-position:left center;
background-color:#383838;
text-decoration:none;
border:1px solid #383838;
}
#navigation a:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0.2em 10px 0.2em 1.4em;
background-image:url(downArrow.gif);
background-repeat:no-repeat;
background-position:left center;
color:#ffffff;
background-color:#383838;
}

```

and the html:

```auto
 
<div> 
<ul id="navigation"> 
<li><a href="home.htm">Home</a></li> 
<li><a href="option 1.htm">option 1</a></li> 
<li><a href="option 2.htm">option 2</a></li> 
<li><a href="option 3.htm">option 3</a></li> 
<li><a href="option 4.htm">option 4</a></li>
<li><a href="option 5.htm">option 5</a></li>  
</ul> 
</div>

```

How do I get rid of the gaps and also make it a set width like 700px?

Thanks for any help.