I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space?
Here is the HTML code snippet:
<div id="menucontainer">
<ul id="menu">
<li><a href="#">Option1</a></li>
<li><a href="#">Option1</a></li>
<li><a href="#">Option1</a></li>
<li><a href="#">Option1</a></li>
<li><a href="#">Option1</a></li>
<li><a href="#">Option1</a></li>
</ul>
</div>
</body>
</html>
This is the CSS code being used:
ul {
margin: 0px;
padding: 0;
}
#menu li {
display: inline;
list-style: none;
}
#menu li a {
margin: 0px;
padding: 5px 30px 5px 30px;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 15px;
color: rgba(66,48,1,1);
border: 1px solid rgba(105,181,50,1);
background: rgba(122,199,67,1);
}
#menu li a:hover {
cursor: pointer;
background: rgba(178,232,139,1);
color: rgba(0,0,0,1);
}
#menu a:link, #menu a:visited {
color: rgba(255,255,255,1);
text-decoration: none;
}
#menu a:active {
color: rgba(250,191,12,1);
}
#menu a#current {
background: rgba(85,137,48,1);
}