Заголовок имеет необъяснимую высоту

Question

Я не знаю почему, но мой h3, кажется, имеет массивную высоту, у меня есть второй h3 дальше по странице, у которого нет этой проблемы вообще, независимо от того, какой запас или отступ Я установил для вершины h3, он всегда будет где-то выше фонового изображения, где находится nav?

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

Вы просто видите, что пространство main берет вверх. Он потребляет все это пространство, потому что элемент перед ним, header, разместил дочерние элементы, а header не имеет clearfix. Так main технически начинается там, где header заканчивается, но находится ниже детей в header.

Вы можете решить это, очистив поплавки в header, тогда main не будет казаться таким высоким и фактически начнется там, где заканчивается header. Я добавил overflow: auto; в header, но есть и другие способы очистки поплавков. 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>