Bom, meu professor pediu para "clonar" o site do facebook como exercício para aplicar o que foi aprendido com html e css durante a aula. Porém, não consigo deixar os dois labels "senha" e "email" em cima dos dois input text correspondentes, ao utilizar margin left ele arrasta o resto dos inputs para o mesmo lado.
Aqui está o código fonte:
*{
margin:0px;
}
#divSuperior{
height:82px;
width:100%;
background-color:#3b5998;
z_index:1;
}
#divSuperior h1{
float:left;
padding-left:190px;
padding-top:26px;
font-size: 36px;
font-family: arial;
}
#divSuperior h1 a{
text-decoration: none;
color: white;
}
#Email{
float:right;
border:1px solid black;
height:22px;
width: 150px;
margin-top:32px;
margin-right:12px;
}
#Senha{
float:right;
border:1px solid black;
height:22px;
width: 150px;
margin-top:32px;
margin-right:75px;
}
#labEmail{
float:right;
color:white;
font-family: arial;
font-size:12px;
cursor:pointer;
margin-top:10px;
}
#labSenha{
float:right;
color:white;
font-family: arial;
font-size:12px;
cursor:pointer;
}
#botaoEntrar{
float:right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Facebook - entre ou cadastre-se</title>
<link rel="stylesheet" type="text/css" href="Facebook.css">
</head>
<body>
<div id = "divSuperior">
<h1><a href = "www.facebook.com.br"><b>Facebook</b></a></h1>
<button type="button" id = "botaoEntrar">Entrar</button>
<label for = "Senha" id = "labSenha">Senha</label>
<label for = "Email" id = "labEmail">Email ou telefone</label>
<input type="text" id = "Senha">
<input type="text" id = "Email"/>
</div>
<div id = "divEsquerda"></div>
<div id = "divDireita"></div>
</body>
</html>