0

I am trying to create a form and when assigning my input's width=100% it exceeds the width of its parent element. I somewhat understand the concept of box-sizing: border-box and how the width=100% might be taking not only the width of the element but also its padding and border. However, here is where I get confused, I do not understand why I am getting this problem in the first place, since my parent element does not have any padding or border.

Why is the width=100% of my input exceeding that of my parent element then?

Also please ignore the colors throughout, since I am pretty new to HTML/CSS I use them to better understand the areas of each element's container.

Thanks.

body {
  background-image: linear-gradient(
      rgba(71, 96, 143, 0.7),
      rgba(71, 96, 143, 0.7)
    ),
    url(./images/survey-form-background.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
  font-family: roboto, sans-serif;
}
#title-subtitle {
  background-color: turquoise;
  margin: 40px 0;
}
#title {
  text-align: center;
  font-size: 1.75em;
  font-weight: 400;
}
#description {
  font-size: 1.25em;
  text-align: center;
  font-style: italic;
  font-weight: 100;
}
#survey {
  background-color: turquoise;
  width: 600px;
  /* margin: 0 auto;
  padding: 40px; */
}
main {
  margin: none;
}
form {
  background-color: orange;
}
.form-container {
  background-color: rgba(221, 30, 30, 0.7);
  margin-bottom: 30px;
}
label {
  font-size: 1.4em;
  /* background-color: white; */
}
input[type="text"] {
  margin-top: 10px;
  display: block;
  /* background-color: beige; */
  width: 100%;
}
input[type="email"] {
  margin-top: 10px;
  display: block;
  /* background-color: beige; */
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>FCC: Survey Form</title>
  </head>
  <body>
    <header id="title-subtitle">
      <h1 id="title">freeCodeCamp Survey Form</h1>
      <p id="description">
        Thank you for taking the time to help us improve the platform
      </p>
    </header>
    <main id="survey">
      <form>
        <div class="form-container">
          <label for="name"
            >Name<input
              type="text"
              id="name"
              name="name"
              placeholder="Enter your name"
              size=
          /></label>
        </div>
        <div class="form-container">
          <label for="email"
            >Email<input
              type="email"
              placeholder="Enter your email"
              id="email"
              name="email"
          /></label>
        </div>
      </form>
    </main>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>

enter image description here

Luis Dorado
  • 1
  • 1

1 Answers1

0

Add this:

input{
    padding: 0.2em; 
    box-sizing: border-box;
    width: 100%;}

it means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.

Arezou Saremian
  • 508
  • 3
  • 8