I'm working on a registration form for a website I'm building, but can't separate the echoed error messages from the text-boxes within the form. Every time I run it in my browser to test the error messages, the text-boxes are moved to the left (out of alignment) and the error messages appear to the right of them. Clearly it's aligned both of the objects in the center, but I only want the form fields to be centered. Any help you can offer is appreciated.
Here's my html and css code...
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<style>
body {
background-color: silver;
}
.welcome {
text-align: center;
font-family: "Arial";
font-size: 30px;
text-shadow: 2px 2px lightgrey;
color: white;
padding-top: 15px;
}
.form-group {
text-align: center;
}
input[name=username], input[name=first_name], input[name=last_name], input[name=email],
input[name=password], input[name=confirm_password] {
border: 3px solid lightgrey;
padding: 10px;
background: white;
margin: 0 0 10px 0;
width: 250px;
outline:0 !important;
}
.help-block {
font-family: "Arial";
font-size: 12pt;
color: white;
}
input[type=submit] {
color: grey;
border: 3px solid lightgrey;
padding: 5px;
width: 100px;
text-align: center;
}
input[type=submit]:focus {
outline:0 !important;
}
input[type=submit]:hover {
background-color: #ddd;
}
input[type=submit]:active {
background-color: #aaa;
color: lightgrey;
}
</style>
</head>
<div class="welcome">
<h1>Register</h1>
</div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>" placeholder="Username">
<span class="help-block"><?php echo $username_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>">
<input type="text" name="first_name" class="form-control" value="<?php echo $first_name; ?>" placeholder="First Name">
<span class="help-block"><?php echo $first_name_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>">
<input type="text" name="last_name" class="form-control" value="<?php echo $last_name; ?>" placeholder="Last Name">
<span class="help-block"><?php echo $last_name_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($email_err)) ? 'has-error' : ''; ?>">
<input type="text" name="email" class="form-control" value="<?php echo $email; ?>" placeholder="Email">
<span class="help-block"><?php echo $email_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<input type="password" name="password" class="form-control" value="<?php echo $password; ?>" placeholder="Password">
<span class="help-block"><?php echo $password_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>" placeholder="Confirm Password">
<span class="help-block"><?php echo $confirm_password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
</html></div>
