I have a problem with 3 select and a label inside my form, I do not find the way to separate them to give them the correct positions
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/Imagenes/favicon.ico" type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" media="screen" href="css/Registros.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/Regiones.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registro - Adopción</title>
</head>
<body>
<h1 class="FormTitulo">Registro de Adopción</h1>
<form action="" class="Registro">
<h2 class="FormSubtitulo">CREA UNA NUEVA CUENTA</h2>
<div class="Contenedor-Registro">
<input type="email" name="TxtCorreo" placeholder="Correo Electronico" id="TxtCorreo" class="input-100">
<input type="text" name="TxtNombres" placeholder="Nombre Completo" id="TxtNombres" class="input-100">
<input type="text" name="TxtRut" placeholder="Rut" id="TxtRut" class="input-48">
<input type="number" name="Telefono" placeholder="Teléfono de contacto" id="Telefono" class="input-dif">
<label for="">Fecha de nacimiento</label>
<input type="date" name="FechaNaci" placeholder="Año de nacimiento" id="FechaNaci" class="input-dif2">
<select name="" id=""></select>
<select id="regiones"></select>
<select id="comunas" ></select>
<input type="button" value="Registrar!" name="BtnRegistro" id="BtnRegistro" class="Boton">
</div>
</form>
</body>
</html>
My CSS code for my project:
*{
box-sizing: border-box;
}
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("/Imagenes/Ahorasi.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
h1{
color: white;
text-align: center;
}
select {
width: 48%;
height: 52px;
margin-bottom: 2%;
}
.Registro{
width: 95%;
max-width: 500px;
margin: auto;
background: rgba(63, 59, 59, 0.733);
border-radius: 7px;
}
.FormTitulo {
background: rgba(0, 0, 0, 0.171);
color: rgb(255, 255, 255);
padding: 20px;
text-align: center;
font-weight: 100;
font-size: 30px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.FormSubtitulo {
background: rgba(0, 0, 0, 0.24);
color: rgb(255, 255, 255);
padding: 20px;
text-align: center;
font-weight: 100;
font-size: 30px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.Contenedor-Registro{
padding: 10px 30px;
display: flex;
flex-wrap: wrap;
}
input{
margin-bottom: 15px;
padding: 15px;
font-size: 16px;
}
.input-48{
width: 48%;
}
.input-100{
width: 100%;
}
.input-dif{
margin-left: 4%;
width: 48%;
}
.input-dif2{
margin-left: 52%;
width: 48%;
}
.Boton {
border: none;
color: rgba(255, 255, 255, 0.212);
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.Boton {
background-color: rgba(0, 0, 0, 0.493);
color: rgb(255, 255, 255);
border: 2px solid rgb(119, 121, 119);
}
.Boton:hover {
background-color: rgba(54, 54, 54, 0.226);
color: rgb(161, 161, 161);
}
Image of how the page looks
