"margin-top" funktioniert nicht in css

Question

In meiner Webseite möchte ich einen festen Abstand zwischen der Uhr und dem Text halten.

Dies ist, wie ich es betrachten möchte:

Wenn ich die Größe der Lasche (Webseite in Breitenrichtung) zu reduzieren, ist das, was passiert:

Ich würde gerne das gleiche auf größeren Bildschirmen arbeiten, aber das funktioniert derzeit auf größeren Bildschirmen.

Unter 850px benutze ich eine Medienabfrage, die gut funktioniert, aber wenn es einen effizienteren Weg gibt, lass es mich wissen.

main.html

<div id = "main"> 
     <div id="clock"></div> 
     <div id = "text"> 
     <div id = "greetDIV"><h1 id = "greet">Hello,''.</h1></div> 

     <div id = "quoteDIV"> 
     <h2 id = "quote">quote</h2> 
     <h2 id = "by" style="display:none;">- <a href = "" id = "byLink">by</a></h2> 
     </div> 
    </div> 
    </div> 

main.css

#quoteDIV{ 
    margin-top: 5%; 
} 


#quote{ 
    text-align: center; 
    color:white; 
    /*opacity: 0.9;*/ 
    font-family: 'Titillium Web', sans-serif; 
    font-size: 21px; 
} 
#by{ 
    text-align: center; 
    color: white; 
    /*opacity: 0.9;*/ 
    font-family: 'Titillium Web', sans-serif; 
    font-size: 21px; 
    margin-top:-13px; 
} 

#greet{ 
    color: white; 
    text-align: center; 
    font-size: 60px; 
    margin-top: 32%; /*PROBLEM!*/ 
    /*opacity: 0.9;*/ 
    font-family: 'Titillium Web', sans-serif; 
} 

#clock { 
    width: 5em; 
    height: 1.3em; 
    border-radius: 1em; 
    position: absolute; 
    left: 0; right: 0; top: 0; bottom: 0; 
    margin: auto; 
    font-family: 'Titillium Web', sans-serif; 
    text-align: center; 
    font-size: 118px; 
    color: white; 
    /*opacity: 0.95;*/ 
    line-height: 1.2em; 
    background: transparent; 
    vertical-align: middle; 
} 

@media only screen and (min-width: 700px) and (max-width: 1000px){ 
    #clock{ 
    font-size: 100px; 
    } 
} 

@media only screen and (min-width: 500px) and (max-width: 699px){ 
    #clock{ 
    font-size: 80px; 
    } 
} 

@media only screen and (min-width: 200px) and (max-width: 499px){ 
    #clock{ 
    font-size: 50px; 
    } 
} 

@media screen and (max-width: 850px) { 
    #greet{ 
    font-size: 33px; 
    margin-top: 380px; 
    } 
    #quoteDIV{ 
    margin-top: 40px; 
    } 
    /*.content 
    { 

    margin-left: 60px; 
    float: center; 
    }*/ 
} 

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

margin-top (in Prozent) ist in Bezug auf die Breite des Containers berechnet. Wenn Sie also die Breite Ihres Bildschirms ändern, ändert sich der Rand.

Wenn ein fester Pixelwert nicht möglich ist, versuchen Sie, den Rand in Höhe der Ansichtsfensterhöhe (vh) oder der Schriftgröße (em/rem) auszudrücken.