Javascript Css按钮宽度的百分比？响应按钮问题

我这里的问题是，每当我制作注册表和登录表单时，按钮元素都不会保持我设置的宽度（75%）。它要么太大要么太小取决于我如何调整大小。您可以看到，如果您运行的代码与表单容器或文本输入相比是不均匀的

Html

Jquery（非常确定这对于这个问题来说是过时的）

---

jsIDLE:

您只需要应用以下内容：

.username, .password, .submit-btn {
  padding: 0px 0px; /* You could put here something custom, like 0px 5px; if you want */
  box-sizing: border-box;
}

---

来解决这一切

啊，非常感谢！我从来没有使用过盒子大小，所以我从来没有想过它会与我有关，我只是对填充物很愚蠢，但我真的很感激它，伙计！别难过，这就是我们都在这里的原因。太好了，它帮助了你！

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

* {
  font-family: "PT Sans", sans-serif;
}

html, body {
  margin: 0%;
  width: 100%;
  height: 100%;
}

#header {
  height: 100px;
  width: 100%;
  background-color: #1ABC9C;
}

#header-wrapper {
  width: 50%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

#banner {
  margin: 0%;
  padding: 0%;
  text-align: center;
  font-size: 45px;
  font-weight: lighter;
}

#register-btn {
  float: left;
}

#login-btn {
  float: right;
}

#register-btn, #login-btn {
  font-size: 25px;
  margin: 0%;
  padding: 0%;
  background: none;
  border: none;
}

#register-btn:hover, #login-btn:hover {
  color: #004C3D;
}

#register-form-container, #login-form-container {
  display: none;
  width: 50%;
  height: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  background-color: #ECF0F1;
  border-radius: 20px;
}

.username {
  margin-top: 50px;
}

.username, .password {
  width: 75%;
  height: 50px;
  margin-left: 12.5%;
  margin-right: 12.5%;
}

.submit-btn {
  width: 75%;
  height: 50px;
  margin-left: 12.5%;
  margin-right: 12.5%;
  margin-bottom: 50px;
  background-color: #1ABC9C;
  border: none;
}

.username:focus, .password:focus {
  box-shadow: 0 0 10px #9ECAED;
}

var isOpen = false;

$(document).ready(function() {
  $("#register-btn").click(function() {
    if(isOpen) {
      isOpen = false;
      $("#register-form-container").css("display", "none");
    } else {
      isOpen = true;
      $("#register-form-container").css("display", "block");
    }
  });

  $("#login-btn").click(function() {
    if(isOpen) {
      isOpen = false;
      $("#login-form-container").css("display", "none");
    } else {
      isOpen = true;
      $("#login-form-container").css("display", "block");
    }
  });
});

.username, .password, .submit-btn {
  padding: 0px 0px; /* You could put here something custom, like 0px 5px; if you want */
  box-sizing: border-box;
}