Post History

Why is my last input box not centering (class: powerwall-battery-input)?

Why is my last input box not centering (class: powerwall-battery-input)?

Why is my last input box not centering (class: powerwall-battery-input)?

I am working on trying to learn web development on my own and I found a form I wanted to duplicate on a roof construction website. 

All my input boxes are centered except the last one that's a bit off and I cannot figure out why. 

Here is my code:

**HTML**

`<main class="calc-wrapper">
      <!-- Solar Roof Data Inputs -->

      <form class="calc-form" action="form-results.html" method="get">
        <label for="first-name" class="label first-name-label">
          First Name
        </label>
        <input type="text" class="first-name-input" />
        <label for="last-name" class="label last-name-label"> Last Name </label>
        <input type="text" class="last-name-input" />

        <!-- Google API Address Autocomplete Section -->
        <label class="label addr-sec-label" for="addr-sec"
          >Address Selection*</label
        >
        <input type="text" class="input" placeholder="Address" id="location" />
        <input
          type="text"
          class="input"
          placeholder="Apt, Suite, etc (optional)"
        />
        <input type="text" class="input" placeholder="City" id="locality" />

        <input
          type="text"
          class="input"
          placeholder="State/Province"
          id="administrative_area_level_1"
        />

        <input
          type="text"
          class="input"
          placeholder="Zip/Postal code"
          id="postal_code"
        />

        <input type="text" class="input" placeholder="Country" id="country" />
        <div class="map" id="map"></div>

        <!-- End - Google API Address Autocomplete Section -->

        <div class="roof-complexity">
          <label class="label roof-complexity-label" for="roof-complexity"
            >Roof Complexity Type*</label
          >
          <select
            class="roof-complexity-input"
            id="roof-complexity-input"
            name="roof-complexity"
          >
            <option selected disabled hidden>Select an Option</option>
            <option id="simple" value="simple">Simple</option>
            <option id="moderate" value="moderate">Moderate</option>
            <option id="complex" value="complex">Complex</option>
          </select>
        </div>

        <div class="system-size">
          <label class="label system-size-label" for="system-size"
            >Select System Size*</label
          >
          <button class="btn calc-form-btn system-size-minus-btn" type="button">
            -
          </button>
          <input
            class="system-size-input"
            id="system-size-input"
            value="4.0"
          />
          <button class="btn calc-form-btn system-size-plus-btn" type="button">
            +
          </button>
        </div>

        <div class="powerwall-battery">
          <label class="label powerwall-battery-label" for="powerwall-battery"
            >Select Powerwall Battery Storage (in units)*</label
          >
          <button
            class="btn calc-form-btn powerwall-battery-minus-btn"
            type="button"
          >
            -
          </button>
          <input class="powerwall-battery-input" id="powerwall-battery-input" />
          <button
            class="btn calc-form-btn powerwall-battery-plus-btn"
            type="button"
          >
            +
          </button>
        </div>
      </form>

      <!-- Totals and Incentives Calculations -->

      <div class="totals-section">
        <label class="label roof-before-itc" for="roof-before-itc"
          >Solar Roof Price Before Incentives</label
        >
        <input type="text" class="input" id="roof-price-before-itc" />

        <label
          class="label powerwall-price-before-itc"
          for="powerwall-price-before-itc"
          >Powerwall Price Before Incentives</label
        >
        <input class="input" id="powerwall-price-before-itc" value=" " />

        <label class="label est-total-before-itc" for="est-total-before-itc"
          >Estimated Total Price Before Incentives</label
        >
        <input type="text" class="input" id="est-total-before-itc" />

        <label class="label est-itc" for="est-itc">Estimated Solar ITC</label>
        <input type="text" class="input" id="est-itc" />
      </div>
    </main>`

**CSS**

`/** Set Global Styling Variables **/

:root {
  /** Fonts **/
  --mainFont: "Arial";
  --textFont: "Open Sans", sans-serif;
  --secondaryFont: "Raleway", sans-serif;

  /** Colors **/
  --primary: #4f5449;
  --darkGray: #2f2e2e;
  --lightGray: #ebebeb;
  --white: #fff;
  --black: #000;
  --darkorange: orange;
}

/** Apply Natural Box Layout Model to All Elements - Allow Components to Change **/

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /* Now 10px = 1rem! */
}

body {
  font-family: var(--mainFont);
  font-size: 1.6rem;
  line-height: 2;
}

.calc-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/** Calculator Form 1 Styles **/

/** Use Flexbox to Limit the Use of Media Queries and to Center the Main Element on All Devices**/

.calc-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
  width: 50%;
  padding: 5rem;
}

.first-name-input {
  width: 50%;
  padding: 2rem;
}

.last-name-input {
  width: 50%;
  padding: 2rem;
}

/** Style Calculator Form Input and Label Sections 
System Size Input area was not given a class of 'input'
so the buttons would remain inline with the input field. 
It was given only and ID to target for a one off style and
for JS **/

/** Style Google API Address Autocomplete Section **/

.sb-title {
  font-family: var(--mainFont);
  font-weight: bold;
}

/** Style Form Address Section **/

.addr-sec-input {
  width: 100%;
  padding: 2rem;
}

.input {
  width: 50%;
  padding: 2rem;
  text-align: center;
}

.label {
  margin-top: 2rem;
  font-weight: bold;
  text-align: center;
  display: block;
}

/** Style Home Size Section **/

.home-size-input {
  padding: 2rem;
  text-align: center;
}

/** Style Roof Complexity Section **/

.roof-complexity-input {
  padding: 2rem;
  text-align: center;
}

/** Style Form System Size Section **/

.system-size {
  display: block;
}

.system-size-input {
  padding: 2rem;
  text-align: center;
}

/** Style Form Powerwall Battery Storage **/
.powerwall-battery {
  display: block;

}

.powerwall-battery-input {
  padding: 2rem;
  text-align: center;
}

.calc-form-btn {
  background-color: var(--primary);
  border: none;
  color: var(--white);
  padding: 0 1.5rem;
  text-align: center;
  text-decoration: none;
  font-size: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

/** Calculator Form 2 Styles **/
.totals-section {
  border: var(--black);
  border-style: solid;
  background: var(--darkorange);
  width: 50%;
  margin-right: 5rem;
  border-width: 1px;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.submit-section {
  text-align: center;
  margin-bottom: 5rem;
}

.submit-btn {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #FFFFFF;
  color: #FFFFFF;
  background-color: var(--primary);
  padding: 4rem;
  font-size: 2rem;
  text-transform: uppercase;
  border-radius: 1rem;
  width: 10%;
}

.submit-btn {
  cursor: pointer;
}`