General Menus Won't Align

I'm using the template at https://freewebsitetemplates.com/preview/mydiary/. I've altered a little for my own site, but the menu bar in the middle of the page won't align on initial page load. I have to hit refresh for everything to line up. Would anyone know why this would be? I'm new to this, so let me know if you need to see code or if you have some simple fixes for this without even seeing the code.

Please help!

 

I just cleared out the cache and it loaded the first page correctly, but then when I clicked on another link from the menu, I had the same problem again. Any ideas?

 

Here is the code:

html, body, ul, li, h1, h2, h3, h4 {
margin: 0px;
padding: 0px;
list-style: none;
}
h1 img {
display: block;
}
img {
border: 0px;
}
a {
color: white;
}
a:hover {
color: #eee;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #000;
font: 12px arial, sans-serif;
color: #A7A7A7;
padding: 30px 5px;
text-align: center;
}
/************************** wrappers **********************************/
#wrapper {
text-align: left;
width: 754px;
margin: auto;
background: url(images/body_bg.gif) repeat-y;
}
#body {
position: relative;
}
#body-top {
background: top left url(images/bar.gif) no-repeat;
}
#body-bot {
background: bottom left url(images/bar.gif) no-repeat;
}
/************************** Header **********************************/
h1 {
padding: 17px 0px 0px 95px;
}
#person {
float:right;
padding: 17px 15px 0px 0px;
right: 20px;
display:inline;
}
#about {
float:left;
margin: 23px 0px 0px 131px;
width: 256px;
height: 190px;
overflow: auto;
text-align: justify;
display:inline;
}
#header2{
float:left;
margin: 20px 0px 0px 131px;
width: 256px;
height: 25px;
overflow: auto;
text-align: justify;
display:inline;
}
.word-highlight {
font-weight: bold;
font-size: 14px;
color: white;
}
/************************** Navigation **********************************/
#header ul {
margin: 0px 17px 20px 99px;
border: 2px solid white;
padding: 5px;
display:inline;
float: left;
width:625px;
}
#header li {
display:inline;
padding: 25px;
}
#header ul a {
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #f3e9d9;
text-transform: uppercase;
}
#header ul a:hover{
color: #fff;
}
/************************** Tray **********************************/
#tray {
padding-left: 130px;
padding-right: 45px;
}
#tray-center {
float: center;
width: 575px;
}
#tray-left {
float: left;
width: 255px;
}
#tray-right {
float: right;
width: 302px;
}
#tray-left .left {
margin-right: 12px;
}
#tray h2 {
margin-bottom: 16px;
}
#tray p {
margin: 0px;
margin-bottom: 3px;
}
#tray-left .more {
padding-right: 12px;
}
/************************** Footer **********************************/
#footer {
text-align: center;
color: white;
margin-left: 95px;
margin-right: 14px;
background: top left url(images/body_bot_left.gif) no-repeat;
}
#footer-right {
padding-top: 33px;
padding-bottom: 22px;
background: top right url(images/body_bot_right.gif) no-repeat;
}


Do you need anything else???