I've been struggling to get the right border positioned between each section of my nav bar. I've tried wrapping each word in a separate span, but it doesn't seem to cooperate. The borders end up on the side and are too small to fill the entire nav bar. Can anyone help me figure out what's going wrong? I would upload an image, but my reputation isn't high enough yet. Essentially, I have a nav bar with 4 different links and I'm trying to add small borders between them. However, when I use spans for each list item, the borders become small and clump together on the right side of the nav bar. It's almost as if the spans aren't even associated with the list items.
Here is the HTML code for my nav bar:
<nav id="navigation">
<ul>
<span class="navSpace"><li>Home</li></span>
<span class="navSpace"><li>Services</li></span>
<span class="navSpace"><li>Info</li></span>
<span class="navSpace"><li>FAQ's</li></span>
</ul>
</nav>
And this is the CSS code for my nav bar:
#navigation{
width: 100%;
height: 50px;
padding-bottom: 0px;
}
#navigation li{
list-style: none;
text-align: left;
display: inline;
float: left;
padding: 5px;
margin-right: 25px;
font-size: 20px;
}
.navSpace{
text-decoration: none;
color: black;
text-shadow: 2px 2px 5px white;
border-right: 2px solid black;
}
Apologies for not providing a picture, and thank you in advance for any assistance!