Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Review Suggested Edit

You can't approve or reject suggested edits because you haven't yet earned the Edit Posts ability.

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

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.~~
~~Please don't be like stack overflow and constantly criticize the format of my question because it has gotten old over there, which is why I am here.~~
~~Thanks~~
Here is my code:
**HTML**
```html
<main class="calc-wrapper">
<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" />
<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>
<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>
<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;
}
```

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**
```html
<main class="calc-wrapper">
<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" />
<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>
<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>
<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;
}
```

html css

Communities

Review Suggested Edit