title: Css button width as percentage? Responsive button issues
body: <p>My problem here is that whenever I make my register and login forms the button elements won't stay to the width I set (75%). It's either too large or too small dependent on how I resize. You can see if you run the code that it's uneven compared to the form-container or text inputs.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Notes&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/home.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/animation.js"&gt;&lt;/script&gt;
      &lt;script src="js/verification.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="header"&gt;
        &lt;div id="header-wrapper"&gt;
          &lt;h1 id="banner"&gt;Notes&lt;/h1&gt;
          &lt;button id="register-btn"&gt;Register&lt;/button&gt;
          &lt;button id="login-btn"&gt;Login&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="register-form-container"&gt;
        &lt;form action="" method="post"&gt;
          &lt;input type="username" class="username" placeholder="Username"&gt;&lt;br&gt;
          &lt;input type="password" class="password" placeholder="Password"&gt;&lt;br&gt;
          &lt;input type="submit" class="submit-btn" value="Sign Up"&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div id="login-form-container"&gt;
        &lt;form action="php/login.php" method="post"&gt;
          &lt;input type="username" class="username" placeholder="Username"&gt;&lt;br&gt;
          &lt;input type="password" class="password" placeholder="Password"&gt;&lt;br&gt;
          &lt;input type="submit" class="submit-btn" value="Login"&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>Jquery (pretty sure this is obsolete to the question)</p>
  
  <pre><code>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");
      }
    });
  });
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/s0t1m4ae/" rel="nofollow">https://jsfiddle.net/s0t1m4ae/</a></p>