Navigation bar pushing div down the page - html

Question

Firstly, my navigation bar is causing my div to be pushed down the page leaving a white bar before the website actually starts. How do I remove this bar?
Secondly, I cannot get the svg circle to align vertically. How do I do this?
Here is my current code:
#import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body{
margin: 0 auto;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: #FFFFFF;
}
header div{
background-image: url(http://eskipaper.com/images/sunset-dark-clouds-1.jpg);
width: 100%;
height: 375px;
}
header div nav ul li{
display: inline-block;
float: right;
padding-right: 10px;
font-size: 25px;
margin-top: 10px;
margin-right: 10px;
}
header div nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
.circular {
width: 200px;
height: 200px;
border-radius: 80px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg) no-repeat;
margin-left: auto ;
margin-right: auto ;
}
.circular img {
opacity: 0;
filter: alpha(opacity=0);
}
<!-- Start of header -->
<header id="header">
<div>
<!-- Start of navigation bar -->
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<!-- End of navigation bar-->
<!-- Profile picture -->
<div class="circular">
<!--<p id="name">Your name</p>-->
<img src="#" alt="Me" />
</div>
</div>
</header>
<!-- End of header -->

Answer 1

Firstly, you don't need a <div> inside the <header> since <header> essentially behaves same as <div>.
Second, unless you're using a reset that we can't see, the <ul> comes with default margin-top and margin-bottom of about 1em. You need to reset to margin:0.
header ul,
header ul li {
margin: 0;
}
Thirdly, you can vertically center using absolute positioning and margins, since you know your element's fixed dimensions.
.circular {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px; /* half of 200px dimension */
margin-top: -100px; /* half of 200px dimension */
}
Working example: https://jsfiddle.net/7uubayLu/

Answer 2

Ok, so it looks like the default stylings of <ul> are causing the header to move down.
ul {
margin: 0;
}
You should consider using a base CSS file like Normalizer.
As for the circle, absolute positioning is what you can use.
Place position: relative on the parent element.
Then add:
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
To .circular.
See the Code Snippet below...
#import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body{
margin: 0 auto;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: #FFFFFF;
}
header div{
background-image: url(http://eskipaper.com/images/sunset-dark-clouds-1.jpg);
width: 100%;
height: 375px;
position: relative;
}
header ul {
margin:0;
}
header div nav ul li{
display: inline-block;
float: right;
padding-right: 10px;
font-size: 25px;
margin-top: 10px;
margin-right: 10px;
}
header div nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
.circular {
width: 200px;
height: 200px;
border-radius: 80px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg) no-repeat;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.circular img {
opacity: 0;
filter: alpha(opacity=0);
}
<!-- Start of header -->
<header id="header">
<div>
<!-- Start of navigation bar -->
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<!-- End of navigation bar-->
<!-- Profile picture -->
<div class="circular">
<!--<p id="name">Your name</p>-->
<img src="#" alt="Me" />
</div>
</div>
</header>
<!-- End of header -->