title: How should I center my form in media query?
body: <p>I already apply the media query to my website, but the problem is that I can't center the container form. If I use left in one of my media query the other does not center it and it cause to not be able to center it. I also include the cols in media query but it can't help it. I also try to configure the .container form but but tablet or don't be in center please help..</p>
  <pre><code>@media only screen and (min-width: 320px) and (max-width: 480px) {
  .container form{
      left: inherit;
      position: relative;
  }
  .form {
      grid-template-columns: 1fr;
    }
  }
  
  /* ------------------------------------For Tablet------------------------&gt;&gt;&gt;&gt;&gt;  */
  
  @media only screen and (max-width: 780px) {
      .container {
          left: -150px;
          position: relative;
      }
      .form {
          grid-template-columns: 1fr;
      }
  }
  </code></pre>