Q:

How to center this form on large screen?

I'm build a page with a form that I would like to center, however I couldn't achieve that ausing auto for padding or margin (Although I gave the form a fixed width) .
Here's my HTML structure:
<div class = "parent row">
    <div class = "child1 row">
        <form>
            <legend>
                Inputs goes here
            </legend>
            <legend>
                Inputs goes here 
            </legend>
        </form>
    </div>
    <div class = "child2 row">
        <form>
            <legend>
                Inputs goes here
            </legend>
            <legend>
                Inputs goes here 
            </legend>
        </form>
    </div>
</div>

I'm using skeleton grid system, And I have a parent div which represent a row and which has two children : Both have a form with fieldset .
I tried giving a fixed width to each one of them and using padding-auto and margin-auto and it didn't work . 
Here the styling code (with SCSS) : 
form{
  max-width: 400px;
  min-width: 250px;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}
legend,fieldset{
  border: 1px grey solid;
  max-width: 400px;
  padding: 0 25%;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  h4{
    background-color: $primary-blue-color;
    color: white;
    margin-bottom : 40px; 
  }
  input{
    margin: 5px;
  }
}

On small screens the parent div get centred, but on larger screens it doesn't . it's aligned in a standard way (from left) . 
How can I make that div and all it children get centred on all type of screens ?

A:

You got to remove the width on legend/fieldset: 
Add:
* {
  box-sizing: border-box;
}

This includes the padding and border in the width of every element. You could always select only the form and it's elements.

* {
  box-sizing: border-box;
}

form {
  max-width: 400px;
  min-width: 250px;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}

legend,
fieldset {
  border: 1px grey solid;
  max-width: 400px;
  padding: 0 25%;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  
  h4 {
    background-color: $primary-blue-color;
    color: white;
    margin-bottom: 40px;
  }
  
  input {
    margin: 5px;
  }
  
}
<div class="parent row">
  <div class="child1 row">
    <form>
      <legend>
        Inputs goes here
      </legend>
      <legend>
        Inputs goes here
      </legend>
    </form>
  </div>
  <div class="child2 row">
    <form>
      <legend>
        Inputs goes here
      </legend>
      <legend>
        Inputs goes here
      </legend>
    </form>
  </div>
</div>

UPDATE: Remove these pieces of code for it to work:

