I have a problem with my page, it turns out that I'm trying to apply a style and all the elements take less the select I do not know what happens someone could help me with this, I tell you this error I get when I run it from the apache server, when I run the page only as an html if I take the css style someone could help me, also I would like to know if I can fill the select from javascript with php. Thank you in advance for the help.
<?php include ("conex.php");?>
<!DOCTYPE html>
<html lang = "es">
<head>
<meta charset = "UTF-8">
<title>Formulario de registro</title>
<link rel="stylesheet" href="../css/reg.css">
</head>
<body>
<h1>Formulario de registro</h1>
<form action="php/regcap.php" method= "post" class = "form-registro">
<h2> Crear capitanes</h2>
<div class ="contenedor-input">
<input type = "text" name = "cedula" placeholder = "Cedula" class = "input-100" required>
<input type = "text" name = "nombre" placeholder = "Nombres" class = "input-48" required>
<input type = "text" name = "apellido" placeholder = "Apellidos" class = "input-48" required>
<input type = "text" name = "user" placeholder = "Usuario" class = "input-48" required>
<input type = "text" name = "pwd" placeholder = "Contraseña" class = "input-48" required>
<select name = "congregacion" id = "cmbCongregacion"class = "input-100" required>
<option value = "escoga una congregacion">Escoga una congregación</option>
<?php
$sql = "SELECT nombre_congregacion FROM congregacion";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_array($result)){
echo'<option value="'.$row['nombre_congregacion'].'">'.$row['nombre_congregacion'].'</option>';
}
?>
</select>
<input type = "submit" value = " Registrar capitan" class = "btn-enviar">
</div>
</form>
</body>
</html>
*{
box-sizing: border-box;
}
body{
font: normal 18px/3 "Fira Sans", "Heveltica Neue", sans-serif;
background: #3aafab;
color: white;
margin: 0;
}
h1{
text-align: center;
}
.form-registro{
width: 95%;
max-width: 500px;
margin: auto;
background:white;
border-radius: 7px;
}
h2{
background: deepskyblue;
text-align: center;
padding: 15px;
font-weight: 100;
font-size: 30px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom: 5px solid crimson;
}
.contenedor-input{
padding: 10px 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
input{
margin-bottom: 15px;
padding: 15px;
font-size: 16px;
border-radius: 3px;
border: 1px solid darkgrey;
}
.input-48{
width: 48%;
}
.input-100{
width: 100%;
margin-bottom : 15px;
padding: 15px;
font-size: 16px;
border-radius: 3px;
border: 1px solid darkgrey;
}
/*select{
margin-bottom: 15px;
padding: 15px;
font-size: 16px;
border-radius: 3px;
border: 1px solid darkgrey;
}*/
.btn-enviar{
background: crimson;
color: white;
margin: auto;
padding: 10px 40px;
cursor: pointer;
}
.btn-enviar:active{
transform: scale(1.05);
}
