Line break in my Navigation bar in Chrome but not Firefox - html

Question

Here is the page in questions: http://www.jacobsievers.com/sample.html
In Firefox and IE, My navigation bar displays correctly, but if you look at it with Chrome there is a line break after 'Gallery'. I'm wondering if someone can help me figure out what I need to do or change in my code. Something with the nav ul or nav li in my css?
(source: jacobsievers.com)
(source: jacobsievers.com)
I don't know how to make those scroll box things that other people put code in so here are some jpgs sorry! Thanks for the help.

Answer 1

nav ul {
text-align: center;
width: 700px;
margin: auto;
word-spacing: 50px;
padding: 0;
font-size: 20px;
}
Should fix it :)
EDIT:
/************************ =Nav ************************/
nav ul {
text-align: center;
width: 700px;
margin: auto;
padding: 0;
font-size: 20px;
}
nav li {
display: inline;
margin: auto;
position: relative;
top:30px;
margin-left: 100px;
}
nav li:first-child { margin-left: 0px; }
nav a {
text-decoration: none;
color: rgb(50, 140, 204);
transition: background-color 2s;
-moz-transition: background-color 2s;
/* Firefox 4 */
-webkit-transition: background-color 2s;
/* Safari and Chrome */
-o-transition: background-color 2s;
/* Opera */
transition: color 2s;
-moz-transition: color 2s;
/* Firefox 4 */
-webkit-transition: color 2s;
/* Safari and Chrome */
-o-transition: color 2s;
/* Opera */
}
nav a:hover {
background-color: #E0EEEE;
color: black;
}
jsFiddle - http://jsfiddle.net/andyjh07/cqZTV/