Margin left and right not the same
<p>In the code snippet below you can see that the input field and the button have more margin on the left than on the right. They do have a margin on all sides of 10px.
Why is the margin not equal on both sides and how can I fix this?</p>

<p>Many thanks in advance.
Kind regards</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font: verdana;
}
html, body {
  font-family: consolas;
  color: #707070 ;
}

@media only screen and (min-width: 1000px) {

#login_form {
  height: 300px;
  background-color: #F0F0F0;
  border-radius: 10px;
}


/*CSS responsive*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
    /*border: 1px solid red;*/
}

.row::after {
    content: "";
    clear: both;
    display: block;
}
}

.button {
  background-color: #003366;
  border: 0px;
  color: white;
  padding: 10px;
  font-family: consolas;
  font-size: 1.2em;
  border-radius: 5px;
  margin: 10px;
  width: 100%;
}

.input {
  padding: 10px;
  border: 0px;
  border-radius: 5px;
  margin: 10px;
  width: 100%;
  font-family: consolas;
  color: #707070;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;
    Index
  &lt;/title&gt;

  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div class="row"&gt;
    &lt;div class="col-3"&gt;&lt;/div&gt;
      &lt;div class="col-6" id="login_form"&gt;
        &lt;form action="" method="" name=""&gt;
          E-mail:&lt;br /&gt;
          &lt;input type="text" name="login_email" value="" class="input" /&gt;&lt;br /&gt;
          Password:&lt;br /&gt;
          &lt;input type="password" name="login_password" value="" class="input"/&gt;&lt;br /&gt;
          &lt;button class="button"&gt;Log in&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;

  &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>