CSS: Chrome browser doesn't leave a space between menu elements - css

Question

EDIT:
I found a solution myself. The width and height in my a element should be put in the li element instead. So these:
width: 7vw;
height: 7vw;
Into the li:)
I have been at it for a while and I just can't figure it out. Internet explorer and Firefox seem to display my menu correctly, but Chrome doesn't.
Here's the html:
<div id="navigationmenu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
And here's the CSS.
I have a lot of stuff there, but I posted it all. Maybe something is interfering??
#navigationmenu a {
display: block;
text-transform: uppercase;
text-decoration: none;
color: #a2a2a2;
font-size: 1.1vw;
line-height: 7vw;
text-align: center;
width: 7vw;
height: 7vw;
border: 1px #a2a2a2 solid;
background: #ffffff;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: default;
margin-top: 0;
margin-bottom: 0;
margin-left: 2.1%;
margin-right: 2.1%;
transition-duration: 400ms;
transition-property: box-shadow;
transition-timing-function: ease;
-webkit-transition-duration: 400ms;
-webkit-transition-property: box-shadow;
-webkit-transition-timing-function: ease;
-o-transition-duration:400ms;
-o-transition-property: box-shadow;
-o-transition-timing-function: ease;
}
#navigationmenu a:hover{
background:#ffffff;
border: 1px #a2a2a2 solid;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}
#navigationmenu li {
display: inline;
float: left;
margin: 0;
padding: 0;
}
I have already tried putting the a element margin and padding to 0 and applying the left and right margins to the li elements instead, but this made the li elements go too far from each other in Firefox (in Chrome they were a little better, but not ok).

Answer 1

Use the following css to add margin between the li elements in you ul
Live example here:
http://jsbin.com/piyilafupe/1/
#navigationmenu ul li {
margin-right: 50px; /* ADD YOU DESIRED DISTANCE HERE */
}
Notes: if for any reason you need to remove the margin on the most right element you can add this
#navigationmenu ul li:last-child {
margin-right: none;
}

Answer 2

Apply the margin to the <li> elements instead of the <a>
You can get rid of the following code in #navigationmenu a
margin-left: 2.1%;
margin-right: 2.1%;
Instead do this
#navigationmenu li {
display: inline;
float: left;
margin-left: 2px;
margin-right: 2px;
padding: 0;
}