Header has unexplainable height

Question

I don't know why, but my h3 seems to have a massive height, I have a second h3 further down the page, which doesn't have this problem at all, no matter what margin or padding I set for the top of h3, it will always be somewhere above the picture background, where the nav is?

HTML

<header>
<div class="fixed">
    <h1>Title</h1>
    <nav id="menu">
        <ul>
            <li><a href="../index.html">Home</a></li>
            <li><a href="work/index.html">Portfolio</a></li>
            <li><a href="travel/index.html">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
 </div>

    <div class="picture">
        <h2>Text</h2>
        <h2 class="name">Betti</h2>
    </div>
</header>

<main>

    <h3>Website Project</h3>
    <p>coded in HTML &amp; CSS</p>

    <div class="project">
      <a href="../project1/index.html" target="_blank">   
      <img class="box" id="project1" src="../project1/img/project1.jpg" alt="project1"></a>
    </div>

CSS

.fixed{
position: fixed;
background-color: white;
top: 0px;
left: 0px;
width: 100%;
border-bottom: dashed;
border-color: #666666;
}

.picture{
background: url("../img/london.jpg") no-repeat;
background-size: 100%;
margin-top: 0%;
width: 100%;
float: left;
border-left: solid #a5053d;
border-width: 15px;
}

 h1{
padding: 1% 0 0 4%;
text-transform: uppercase;
float: left;
left: 0;
}

 h2{
padding: 0 4%;
color: white;
float: left;
margin-top: 3%;
}

h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
margin-bottom: -20px; 
margin-top: 0;
}

#project1, #project2{
margin-top: 0px;
margin-left: 20%;
margin-right: auto;
width: 60%;
text-align: center;
border: 1.9px solid #a5053d;
margin-bottom: 4%;
}

.project{
clear: both;
float: none;
overflow: none;
position: center;
width: 100%;
}

Answer 1

You're just seeing space that main is taking up. It's consuming all of that space because the element before it, header, has floated children and header doesn't have a clearfix. So main technically starts where header ends, but is below the children in header.

You can address that by clearing the floats in header, then main won't appear so tall and will actually start where header ends. I added overflow: auto; to header but there are other ways to clear floats, too. http://codepen.io/anon/pen/EZbmKV

header {
  overflow: auto;
}

.fixed{
position: fixed;
background-color: white;
top: 0px;
left: 0px;
width: 100%;
border-bottom: dashed;
border-color: #666666;
}

.picture{
background: url("../img/london.jpg") no-repeat;
background-size: 100%;
margin-top: 0%;
width: 100%;
float: left;
border-left: solid #a5053d;
border-width: 15px;
}

 h1{
padding: 1% 0 0 4%;
text-transform: uppercase;
float: left;
left: 0;
}

 h2{
padding: 0 4%;
color: white;
float: left;
margin-top: 3%;
}

h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
margin-bottom: -20px; 
margin-top: 0;
}

#project1, #project2{
margin-top: 0px;
margin-left: 20%;
margin-right: auto;
width: 60%;
text-align: center;
border: 1.9px solid #a5053d;
margin-bottom: 4%;
}

.project{
clear: both;
float: none;
overflow: none;
position: center;
width: 100%;
}

<header>
<div class="fixed">
    <h1>Title</h1>
    <nav id="menu">
        <ul>
            <li><a href="../index.html">Home</a></li>
            <li><a href="work/index.html">Portfolio</a></li>
            <li><a href="travel/index.html">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
 </div>

    <div class="picture">
        <h2>Text</h2>
        <h2 class="name">Betti</h2>
    </div>
</header>

<main>

    <h3>Website Project</h3>
    <p>coded in HTML &amp; CSS</p>

    <div class="project">
      <a href="../project1/index.html" target="_blank">   
      <img class="box" id="project1" src="../project1/img/project1.jpg" alt="project1"></a>
    </div>