title: How can I center my html form?
body: <p>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 &amp; CSS just learning)
  HTML Code</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h1 class="brand"&gt;&lt;span&gt;Acme&lt;/span&gt; Web Design&lt;/h1&gt;
  &lt;div class="wrapper animated bounceInLeft"&gt;
  
    &lt;div class="contact"&gt;
      &lt;h3&gt;Email Us&lt;/h3&gt;
      &lt;form&gt;
        &lt;p&gt;
          &lt;label&gt;Name&lt;/label&gt;
          &lt;input type="text" name="name"&gt;
        &lt;/p&gt;
        &lt;p&gt;
          &lt;label&gt;Company&lt;/label&gt;
          &lt;input type="text" name="company"&gt;
        &lt;/p&gt;
        &lt;p&gt;
          &lt;label&gt;Email Address&lt;/label&gt;
          &lt;input type="email" name="email"&gt;
        &lt;/p&gt;
        &lt;p&gt;
          &lt;label&gt;Phone Number&lt;/label&gt;
          &lt;input type="text" name="phone"&gt;
        &lt;/p&gt;
        &lt;p class="full"&gt;
          &lt;label&gt;Message&lt;/label&gt;
          &lt;textarea name="message" rows="5"&gt;&lt;/textarea&gt;
        &lt;/p&gt;
        &lt;p class="full"&gt;
          &lt;button&gt;Submit&lt;/button&gt;
        &lt;/p&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My CSS</p>
  
  <pre><code>    *{
    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 &gt; *{
    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 &gt; *{
      padding:2em;
    }
  
     .brand .contact{
      text-align: center;
    }
  
  
  }
  </code></pre>