链接被推出导航栏

Question

我遇到一个问题，导航栏中的前两个链接似乎被推下并且不合适。奇怪的是，这似乎只占我加载页面的10-20％，我似乎无法使用jsfiddle复制问题。以下链接指向主页上发生的内容的屏幕截图：http://postimg.org/image/6ze6aqhrz/

这里有一个页面的小提琴，我将.white类添加到导航栏，这是我最近做的更改： http://jsfiddle.net/justaflurg/g8c4z07m/

我的导航html：

<!--NAVIGATION-->   
<div class='navbar white'>

    <a href='index.html'><h1 id='namelogo'>Lorem Ipsum</h1></a>
    <div id='navcontainer'>
        <ul id='nav'>
            <li><a href='#portfolio'>Lorem</a></li>
            <li><a href='#contact'>Ipsum</a></li>
        </ul>
    </div>

</div><!--Navbar-->    

我的导航css：

/* 7. NAVIGATION ------------------------------------------*/
.navbar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: rgba(255,255,255,0.0);
transition: all 0.25s ease;
}

.white {
background-color: #fff;
border-bottom: solid 1px #eee;
}

.navbar.past-header {background-color: rgba(255,255,255,1.0); color: #222;}

#namelogo {
display: inline-block;
margin: 16px 0px 0px 30px;
text-transform: uppercase;
color: #777;
font-family: 'Nunito', 'Gill Sans', 'Gill Sans MT', 'Myriad Pro',  Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 1em;
letter-spacing: 0.01em;
}

#namelogo:hover {color: #999;}

div#navcontainer {
float: right;
display: inline-block;
margin: 15px 30px 0px 0px;
}

ul#nav {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
text-align: right;
}

ul#nav li {
margin: 0;
padding: 0; 
display: inline;
}

ul#nav a {
margin-left: 25px;
padding: 0;
color: #47E2CA;
font-size: 0.90em;
font-weight: 600;
letter-spacing: 0.035em;
text-transform: uppercase;
font-family: 'Source Sans Pro', 'Myriad Pro', 'Trebuchet MS', Verdana, sans-serif;
}

#nav a:hover {color: #64F0D4;}