positioning

[Hosun]

Hi,

Clicking the icon in <header> opens the file (Contact Me).

It is before adding php.

There is the green box in <main>.

How can I position it in the middle?

I just think margin: 0px auto would work.

https://dazzling-lamport-08b3f2.netlify.com/

Hosun Kang

[osgood_]

The code below is all you require between the <main> </main> tags on the contact page:

<main>
<div class="form-container">
<h2>Contact Me</h2>
<form method="post" class="feedback-form" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">
</p>
<p>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" value="<?php echo isset($_POST['phone']) ? $phone : ''; ?>">
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message"><?php echo isset($_POST['message']) ? $message : ''; ?></textarea>
</p>
<p>
<label for="alien">6 + 6 = ?</label>
<input type="text" name="alien" id="alien" value="<?php echo isset($_POST['alien']) ? $alien : ''; ?>">
</p>
<?php if($msg != ''): ?>
<div class="alert-message"><?php echo $msg; ?></div>
<?php endif; ?>
<button type="submit" name="submit" class="btn-green">Submit</button>
</form>
</div>
</main>

Then add the css below to position the form-container in the center of your contact page:

.form-container {
width: 75%;
margin: 0 auto;
padding: 30px;
}