Styled inputs won't align

Question

I'm making a simple booking form, it is complete but for some reason every single input is slightly off to the right from being center aligned.

I've wrapped the form because there's multiple sections and the DIVs for inputs make controlling them slightly easier.

The page is complete so needs to follow this layout, the only issue is the alignment as shown in the image and code below.

.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 1.75vh;
}
}

.booking-form {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3.5vh;
}


.user-input {
    max-width: 60%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5vh;
}

.responsecontainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.user-response {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}

::placeholder {
  color: #FFFFFF;
}

input[type=name], select {
  width: 100%;
  padding: 2vh;
  margin: 0.5vh;
  display: inline-block;
  border-radius: 2vh;
  border: 0;
  color: #FFFFFF;
  background: #000000;
  outline: none;
}

<div class="booking-wrap">
 <div class="booking-form">
  <p class="form-explainer left textoffblack">Please enter your details</p>

   <div class="user-input">

    <div class="responsecontainer">
     <div class="user-response">
      <input type="name" placeholder="First Name" id="forename" name="forename" required>
     </div>
    </div>

   </div>
  </div>
</div>

Any help would be appreciated, I assume it's a quick fix but can't quite figure it out.

Answer 1

Your input element has width: 100%; and margin: 0.5vh;. margin is always added to the width, regardless of the box-sizing setting, so the overall width is 100% (of the container's width) plus 2 time 0.5vh. That's why it exceeds the width of its container.

A solution would probably be to apply those 0.5vh as padding to the container and remove the margin setting from the input element/s.

Answer 2

.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 1.75vh;
}
}

.booking-form {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3.5vh;
}


.user-input {
    max-width: 60%;
    //text-align: center;
    //margin-left: auto;
    //margin-right: auto;
    margin-top: 2.5vh;
}

.responsecontainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.user-response {
    width: 94%;
    //margin-left: auto;
    //margin-right: auto;
}

::placeholder {
  color: #FFFFFF;
}

input[type=name], select {
  width: 100%;
  padding: 2vh;
  margin: 0.5vh;
  display: inline-block;
  border-radius: 2vh;
  border: 0;
  color: #FFFFFF;
  background: #000000;
  outline: none;
}

<div class="booking-wrap">
<div class="booking-form">
<p class="form-explainer left textoffblack">Please enter your details</p>

<div class="user-input">

<div class="responsecontainer">
<div class="user-response">
<input type="name" placeholder="First Name" id="forename" name="forename" required>
</div>
</div>

</div>
</div>
</div>

I commented out margin-left: auto, magin-right: auto for .responsecontainer and .user-response

However, I am not sure this is what you want. If it is not, Please let me know more detail so that I can help you.

Answer 3

You're setting the width to be 100% of its container, but you're also setting a margination of 1vh in width in total, you can use calc() to avoid that issue: width: calc(100% - 1vh).

And making use of a border-box for the input will make the border part of the box itself.

.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 1.75vh;
}
}

.booking-form {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3.5vh;
}


.user-input {
    max-width: 60%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5vh;
}

.responsecontainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.user-response {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}

::placeholder {
  color: #FFFFFF;
}

input[type=name], select {
  width: calc(100% - 1vh);
  box-sizing: border-box;

  padding: 2vh;
  margin: 0.5vh;
  display: inline-block;
  border-radius: 2vh;
  border: 0;
  color: #FFFFFF;
  background: #000000;
  outline: none;
}

<div class="booking-wrap">
<div class="booking-form">
<p class="form-explainer left textoffblack">Please enter your details</p>

<div class="user-input">

<div class="responsecontainer">
<div class="user-response">
<input type="name" placeholder="First Name" id="forename" name="forename" required>
</div>
</div>

</div>
</div>
</div>

Answer 4

There may be a better solution than this but removing margins from the sides of the inputs seems to work.

input[type=name], select {
  width: 100%;
  padding: 2vh;
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
  display: inline-block;
  border-radius: 2vh;
  border: 0;
  color: #FFFFFF;
  background: #000000;
  outline: none;
}