title: I can't figure out how to control the CSS height of an ahref
body: <p>I have an HTML page with embedded CSS styling.  It has a form with an input button that says "Submit Payment" using #fjButton and height of 54, which gets obeyed. I also have an  that has an id #fjButton2 with a height of 14... both set to !important.  The #fjButton2 doesn't get obeyed.  Im's sure it's some stupid thing, but i just can't figure it out... the  stays at 32px no matter what i do.  See it at:
  <a href="https://codepen.io/johnstonf/full/YzwGqNO" rel="nofollow noreferrer">https://codepen.io/johnstonf/full/YzwGqNO</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test-Store&lt;/title&gt;
  
      &lt;link href="https://fonts.googleapis.com/css?family=Fjalla+One|Inter&amp;display=swap" rel="stylesheet"&gt;
  
      &lt;!-- Landing page styling --&gt;
      &lt;style type="text/css"&gt;
          body{
              background-color: #f2f4f9;
          }
  
          h3, h5{
              font-family: 'Fjalla One', sans-serif;
              font-weight: 100;
          }
  
          h3{
              font-size: 36px;
          }
  
          h5{
              font-size: 24px;
          }
  
          p, label{
              font-family: 'Inter', sans-serif;
          }
  
          hr{
              color:#fff;
              background-color: #fff;
              border-top:1px solid #fff;
              margin-top:10px;
              margin-bottom: 10px;
          }
  
          #container{
              width:1200px;
              margin:0 auto;
              padding-top: 3%;
          }
  
          .column-6{
              text-align: center;
              width: 50%;
              float:left;
          }
  
          #left-wrapper{
              background-color: #72cca7;
              box-shadow: 0 1px 3px 0 #dce0e6;
              border-radius: 14px;
              border: 3px solid black;
              margin-right: 14px;
              margin-top: 14px;
              padding: 13px;  
          }
  
          #right-wrapper{
              padding-top: 13px;
              margin-top: 13px;
              border-radius: 14px;
              border: 3px solid black;
              margin-right: 14px;
  
              background-color: #72cca7;
              box-shadow: 0 1px 3px 0 #dce0e6;
              border-radius: 14px;
              border: 3px solid black;
              margin-right: 14px;
              margin-top: 14px;
              padding: 13px;  
          }
  
          #profile-pic{
              width:200px;
              display:block;
              margin: 0 auto;
              border-radius: 50%;
              float:left;
  
          }
  
          #left-wrapper-header{
              min-width:50%;
              float:left;
              padding-left:20px;
  
          }
  
          #left-wrapper-header h3{
              color:#fff;
  
          }
  
          #right-wrapper h3{
              color: #10a195;
          }
  
          .Z9999{
              margin-left: 1px;
              width: 99%;
          }
  
          /* ------------------------ FORM FIELDS ------------------------ */
  
          .form-field-12{
              width: 100%;
              margin-bottom: 6px;
              padding-top: 3px;
          }
  
          .form-field-6{
              width: 50%;
              float:left;
              margin-bottom: 1px;
          }
  
  
          select{
              width: 100%;
              height: 25px!important;
              box-shadow: 0 1px 3px 0 #dce0e6;
              padding: 1px 2px;
              border-radius: 4px;
              background-color: #fff;
              border: 1px solid transparent;
              font-size: 20px;
              color:  #44464a;
          }
  
          input{
              box-shadow: 0 1px 3px 0 #dce0e6;
              height:40px;
              border-radius: 4px;
              background-color: #fff;
              border: 1px solid transparent;
              color:  #44464a;
              width: 95%;
              padding: 5px;
              font-size: 16px;
          }
  
  
  
          input::placeholder {
            color: #9fa1a6;
          }
  
          /* ------------------------ BUTTON STYLING ------------------------ */
  
  
          #fjButton {
              box-shadow: 0 1px 3px 0 #dce0e6;
              font-family:'Fjalla One', sans-serif;;
              border-radius: 4px;
              background-color: #fff;
              border: 1px solid transparent;
              color:  #44464a;
              height: 54px !important;
              width: 30%;
              padding: 5px;
              font-size: 16px;
              text-decoration:none;
              margin: 0px;
          }
  
          #fjButton2 {
              box-shadow: 0 1px 3px 0 #dce0e6;
              font-family:'Fjalla One', sans-serif;;
              border-radius: 4px;
              background-color: #fff;
              border: 1px solid transparent;
              color:  #44464a;
              height: 14px !important;
              width: 30%;
              padding: 5px;
              font-size: 16px;
              text-decoration:none;
              margin: 0px;
          }
  
  
  
          .myButton:hover {
              opacity: .6;
          }
  
          @media screen and (max-width:1200px){
              #container{
                  width:80%;
              }
  
              .column-6{
                  width: 100%;
              }
          }
  
          @media screen and (max-width:800px){
              #container{
                  width:100%;
              }
  
              .Z9999{
                  margin-left: 20px;
                  width: 100px;
              }
          }
      &lt;/style&gt;
  
      &lt;!-- Success page styling --&gt;
      &lt;style type="text/css"&gt;
          h4{
              font-family: 'Fjalla One', sans-serif;
              font-weight: 100;
              font-size: 24px;
          }
  
          #box{
              max-width: 500px;
              margin:0 auto;
              margin-top: 100px;
              padding:30px;
              background-color: #fff;
              text-align: center;
              box-shadow: 0 1px 3px 0 #dce0e6;
              border-radius: 4px;
              border: 1px solid transparent;
          }
  
          .myButton {
              background-color:#72cca7;
              background-color:#26367e;
              display:inline-block;
              cursor:pointer;
              color:#ffffff;
              font-family:Verdana;
              font-size:17px;
              padding:10px;
              width:30%;
              border-radius: 0;
              text-decoration:none;
              text-align: center;
              transition: .3s;
          }
          .myButton:hover {
              opacity: .6;
          }
  
          #succes-icon{
              width: 100px;
  
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;style type="text/css"&gt;
          .StripeElement {
            box-sizing: border-box;
  
            height: 40px;
  
            padding: 10px 12px;
  
            border: 1px solid transparent;
            border-radius: 4px;
            background-color: white;
  
            box-shadow: 0 1px 3px 0 #e6ebf1;
            -webkit-transition: box-shadow 150ms ease;
            transition: box-shadow 150ms ease;
          }
  
          .StripeElement--focus {
            box-shadow: 0 1px 3px 0 #cfd7df;
          }
  
          .StripeElement--invalid {
            border-color: #fa755a;
          }
  
          .StripeElement--webkit-autofill {
            background-color: #fefde5 !important;
          }
      &lt;/style&gt;
  
      &lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
  
      &lt;div id="container"&gt;
          &lt;div class="column-6"&gt;
              &lt;div id="left-wrapper"&gt;
                  &lt;img id="profile-pic" src="{% static 'images/logo-20may29.png' %}"&gt;
                  &lt;div id="left-wrapper-header"&gt;
                      &lt;h3&gt;Item Purchase&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div style="clear:left"&gt;&lt;/div&gt;
                  &lt;hr&gt;
                  &lt;!-- Add form here --&gt;
                  &lt;form action="{% url 'charge' %}" method="post" id="payment-form"&gt;
                      &lt;div class="form-field-12"&gt;
                          &lt;label for="amount"&gt;&lt;b&gt;Pick a product from this dropdown:&lt;/b&gt;&lt;/label&gt;
                          &lt;select required name="amount" id="amount"&gt;
                            &lt;option selected value="1"&gt;$1 CAD ------&gt; TEST&lt;/option&gt;
                            &lt;option value="1"&gt;$1 CAD -----&gt; 1 item&lt;/option&gt;
                            &lt;option value="2"&gt;$2 CAD -----&gt; 2 items&lt;/option&gt;
                            &lt;option value="3"&gt;$3 CAD ----&gt; 3 items&lt;/option&gt;
                            &lt;option value="4"&gt;$4 CAD ----&gt; 4 items&lt;/option&gt;
                            &lt;option value="5"&gt;$5 CAD ---&gt; 5 items&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-field-6"&gt;
                          &lt;label for="email"&gt;&lt;strong&gt;* Enter your email address:&lt;/strong&gt;&lt;/label&gt;
                          &lt;input required type="email" name="email" placeholder="* email..."&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-field-6"&gt;
                          &lt;label for="username"&gt;&lt;strong&gt;* Desired username / login name:&lt;/strong&gt;&lt;/label&gt;
                          &lt;input required type="text" name="username" placeholder="* username..."&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-field-6"&gt;
                          &lt;label for="email"&gt;&lt;strong&gt;Enter your Dogs name:&lt;/strong&gt;&lt;/label&gt;
                          &lt;input type="text" name="dog" placeholder="Dogs name..."&gt;
                      &lt;/div&gt;
                      &lt;div class="form-field-6"&gt;
                          &lt;label for="email"&gt;&lt;strong&gt;Enter your Favorite beer:&lt;/strong&gt;&lt;/label&gt;
                          &lt;input type="text" name="beer" placeholder="Favorite beer..."&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-field-6"&gt;
                          &lt;label for="country"&gt;&lt;strong&gt;* Enter your Country:&lt;/strong&gt;&lt;/label&gt;
                          &lt;input required type="text" name="country" placeholder="* Country..."&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-field-6"&gt;
                          &lt;label for="phone"&gt;&lt;strong&gt;* Enter your phone number:&lt;/strong&gt;&lt;/label&gt;
                          &lt;input type="tel" id="phone" name="phone" placeholder="* Phone..."
                                 pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                                 required&gt;
                          &lt;small&gt;Format: 123-456-7890&lt;/small&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-row"&gt;
                        &lt;label for="card-element"&gt;
                          &lt;strong&gt;Credit or debit card&lt;/strong&gt;
                        &lt;/label&gt;
                        &lt;div id="card-element"&gt;
                          &lt;!-- A Stripe Element will be inserted here. --&gt;
                    &lt;/div&gt;
  
                      &lt;!-- Used to display form errors. --&gt;
                      &lt;div id="card-errors" role="alert"&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                      &lt;div style="clear:left"&gt;
                    &lt;/div&gt;
                    &lt;hr&gt;
  
                      &lt;input  id="fjButton" style="background-color:#10a195;height:12px" type="submit" value="Submit Payment" name=""&gt;
                       &lt;hr&gt;
  
                       &lt;a href="https://opp.ca" target="_blank" id="fjButton2" style="background-color:#10a195; height:77px"   &gt;OPP Homepage&lt;/a&gt;
                       &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
                  &lt;/form&gt;         
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="column-6"&gt;
              &lt;div id="right-wrapper"&gt;
                  &lt;img class="form-field-12" src="{% static 'images/Z9999.png' %}"&gt;
                  &lt;h3&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;We appreciate you!&lt;/h3&gt;
                  &lt;hr&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          // Create a Stripe client.
          var stripe = Stripe('pk_live_blahblah');
  
          // Create an instance of Elements.
          var elements = stripe.elements();
  
          // Custom styling can be passed to options when creating an Element.
          // (Note that this demo uses a wider set of styles than the guide below.)
          var style = {
            base: {
              color: '#32325d',
              fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
              fontSmoothing: 'antialiased',
              fontSize: '16px',
              '::placeholder': {
                color: '#aab7c4'
              }
            },
            invalid: {
              color: '#fa755a',
              iconColor: '#fa755a'
            }
          };
  
          // Create an instance of the card Element.
          var card = elements.create('card', {style: style});
  
          // Add an instance of the card Element into the `card-element` &lt;div&gt;.
          card.mount('#card-element');
  
          // Handle real-time validation errors from the card Element.
          card.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
              displayError.textContent = event.error.message;
            } else {
              displayError.textContent = '';
            }
          });
  
          // Handle form submission.
          var form = document.getElementById('payment-form');
          form.addEventListener('submit', function(event) {
            event.preventDefault();
  
            stripe.createToken(card).then(function(result) {
              if (result.error) {
                // Inform the user if there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
              } else {
                // Send the token to your server.
                stripeTokenHandler(result.token);
              }
            });
          });
  
          // Submit the form with the token ID.
          function stripeTokenHandler(token) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById('payment-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);
  
            // Submit the form
            form.submit();
          }
      &lt;/script&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>