Mein erster Versuch mit Breakpoints

[Martin_Online]

Ich hab mein Code etwas verändert

  
<div class="kopf">  
        <div id="logo">Hier kommt das Logo rein</div>  
        <div id="topNav">  
            <ul>  
                <li>Favoriten</li>  
                <li>Anmelden</li>  
                <li>Kontakt</li>  
                <li>Melden</li>  
            </ul>  
        </div>  
  
    </div>  
  
    <div class="headline">Hier kommt die Headline rein</div>  

  
.kopf {  
    background-color: #48d1cc;  
    color: #fff;  
    padding: 1.875em;  
}  
  
.kopf h1 {  
    font-weight: normal;  
    text-align: center;  
}  
.headline {  
    height: 2%;  
    background-color: #fff;  
}  

Ich kann meiner "headline" auch 50% Abstand geben es ändert sich rein gar nichts. Gebe ich dieser allerdings einen Abstand von 50px wie ich es früher gemacht habe, sehe ich meinen Abstand? Warum geht es nicht mit % nicht?