How can I center my html form? - html

Question

So I watched this tutorial on how to create a good contact me form. But the problem is I am having trouble centering it. It uses some grid tags and it responsive. So I would like to keep the responsive there but when in full width I want it to be centered like the logo is. (New to HTML & CSS just learning)
HTML Code
<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">
<div class="contact">
<h3>Email Us</h3>
<form>
<p>
<label>Name</label>
<input type="text" name="name">
</p>
<p>
<label>Company</label>
<input type="text" name="company">
</p>
<p>
<label>Email Address</label>
<input type="email" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5"></textarea>
</p>
<p class="full">
<button>Submit</button>
</p>
</form>
</div>
</div>
My CSS
*{
box-sizing: border-box;
}
body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1em;
}
.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}
ul{
list-style: none;
padding:0;
}
.brand{
text-align: center;
}
.brand span{
color:#fff;
}
/* REMOVE */
/*
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
padding: 1em;
}
/* REMOVE */
/*
.company-info{
background:#DA00F0;
}
*/
/*
.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}
*/
.contact{
background:#f9feff;
}
/* FORM STYLES */
.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.contact form label{
display:block;
}
.contact form p{
margin:0;
}
.contact form .full{
grid-column: 1 / 3;
}
.contact form button, .contact form input, .contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}
.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}
.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}
/* LARGE SCREENS */
/*Once it passes 700px do this */
#media(min-width:700px){
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
}
.wrapper > *{
padding:2em;
}
.brand .contact{
text-align: center;
}
}

Answer 1

#media(min-width: 700px){
.wrapper {
/* remove this
display: grid;
grid-template-columns: 1fr; */
display: flex;
justify-content: center;
}
*{
box-sizing: border-box;
}
body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1em;
}
.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}
ul{
list-style: none;
padding:0;
}
.brand{
text-align: center;
}
.brand span{
color:#fff;
}
/* REMOVE */
/*
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
padding: 1em;
}
/* REMOVE */
/*
.company-info{
background:#DA00F0;
}
*/
/*
.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}
*/
.contact{
background:#f9feff;
}
/* FORM STYLES */
.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.contact form label{
display:block;
}
.contact form p{
margin:0;
}
.contact form .full{
grid-column: 1 / 3;
}
.contact form button, .contact form input, .contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}
.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}
.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}
/* LARGE SCREENS */
/*Once it passes 700px do this */
#media(min-width:700px){
.wrapper{
display: flex;
justify-content: center;
}
.wrapper > *{
padding:2em;
}
.brand .contact{
text-align: center;
}
}
<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">
<div class="contact">
<h3>Email Us</h3>
<form>
<p>
<label>Name</label>
<input type="text" name="name">
</p>
<p>
<label>Company</label>
<input type="text" name="company">
</p>
<p>
<label>Email Address</label>
<input type="email" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5"></textarea>
</p>
<p class="full">
<button>Submit</button>
</p>
</form>
</div>
</div>
While you could use margin: auto, you might stumble upon weird behaviors if you use grid somewhere not shown in your code.
Further reading:
Css grid
A guide to css flexbox

Answer 2

This code could be of help, basically I have removed the code that is affecting the container of the form and added so that it will work in responsive in a single field.
CSS:
*{
box-sizing: border-box;
}
body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1em;
}
.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}
ul{
list-style: none;
padding:0;
}
.brand{
text-align: center;
}
.brand span{
color:#fff;
}
/* REMOVE */
/*
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
padding: 1em;
}
/* REMOVE */
/*
.company-info{
background:#DA00F0;
}
*/
/*
.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}
*/
.contact{
background:#f9feff;
max-width: 680px;
margin: auto;
}
/* FORM STYLES */
.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.contact form label{
display:block;
}
.contact form p{
margin:0;
}
.contact form .full{
grid-column: 1 / 3;
}
.contact form button, .contact form input, .contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}
.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}
.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}
#media screen and (max-width: 680px) {
.contact{
max-width: inherit;
}
.contact form {
display: block;
}
}
EXAMPLE: https://jsfiddle.net/8dvch6nj/

Answer 3

Depending on whether or not you wanted to keep the entire block in grid format, you could always change .wrapper to not use the grid, but just have a margin of 0px auto. If you wanted to still use grid layout, you could just change .wrapper to a width of 100%
*{
box-sizing: border-box;
}
body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:1em;
}
.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}
ul{
list-style: none;
padding:0;
}
.brand{
text-align: center;
}
.brand span{
color:#fff;
}
/* REMOVE */
/*
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
padding: 1em;
}
/* REMOVE */
/*
.company-info{
background:#DA00F0;
}
*/
/*
.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}
*/
.contact{
background:#f9feff;
}
/* FORM STYLES */
.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.contact form label{
display:block;
}
.contact form p{
margin:0;
}
.contact form .full{
grid-column: 1 / 3;
}
.contact form button, .contact form input, .contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}
.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}
.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}
/* LARGE SCREENS */
/*Once it passes 700px do this */
#media(min-width:700px){
.wrapper{
display: grid;
grid-template-columns: 100%;
}
.wrapper > *{
padding:2em;
}
.brand .contact{
text-align: center;
}
}
<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">
<div class="contact">
<h3>Email Us</h3>
<form>
<p>
<label>Name</label>
<input type="text" name="name">
</p>
<p>
<label>Company</label>
<input type="text" name="company">
</p>
<p>
<label>Email Address</label>
<input type="email" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5"></textarea>
</p>
<p class="full">
<button>Submit</button>
</p>
</form>
</div>
</div>