[CSS] margin-right für main klappt nicht

[#Saiirex]

Hey, iwie klappt bei der navi margin-right ohne probleme, bei main aber nicht..

hier der code:

main{
    width: 100%;
    float: left;
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    margin-right: 1em;
    margin-left: 1em;
}

main > article > div{
    width: 50%;
    float: left;
    margin-top: 1em;
    margin-right: 1em;
    margin-left: 1em;
    margin-bottom: 0.5em;
    border-style: solid solid solid solid;
    border-width: 2px;
    border-radius: 5px;
}

main > article > div > h3{
    text-align: center;
    width: 100%;
    border-style: none none solid none;
    border-width: 1px;
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
}

main > article > div > p{
    text-align: left;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
}

#login{
    width: auto;
    float: left;
    text-align: center;
    margin-left: 1em;
    margin-top: 1em;
    border-style: solid solid solid solid;
    border-width: 2px;
    border-radius: 8px;
}

#login > form{
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    margin-left: 1em;
    text-align: left;
}

woran liegt das?

[.SkyneT.]

Etwas HTML oder ein wäre ganz nett.

[sven12345]

Margin kann nicht mit der einheit em angegeben werde, das steht in keiner relation zu irgendwas -> entweder % oder px, wenn du dein element mittig haben willst dann mit margin: 0 auto -> 0 für oben/unten; auto für rechts/links
Hier als codepen:
Außerdem wenn du schon die breite 100% vergibst und dein margin noch darauf rechnen würdest wären das über 100% -> geht schlecht -> also margin-right/left:5% und width 90% wäre auch eine Möglichkeit