<input> field go outside of container: project passed

Hello,
I passed the “survey form” project. I encountered a probleme whith input fields.
Could you say me why the input fields go outside of their container on the right side ?
This is the code in the sate of when I encountered the problem:

<!DOCTYPE html>
<html>
  <head>
    <title>Cours JavaScript</title>
    <meta charset="utf-8" />
    <style>
      body {
        /* position: fixed; */
        background-image: linear-gradient(
            115deg,
            rgba(58, 58, 158, 0.8),
            rgba(136, 136, 206, 0.7)
          ),
          url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
        width: 100%;
        height: 100%;
        z-index: -1;
        background-size: cover;
        /* background-position: center;
        background-repeat: no-repeat; */
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.4;
        color: white;
        background-color: darkblue;
        /* margin: 0; */
      }
      #container {
        width: 720px;
        background-color: rgb(241, 210, 157);
        margin:auto;
        padding: 0px;
       
      }
      input {
        width: 100%;
      }
      .div-input {

      }
      #survey-form {
        width: 720px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header>
        <h1 id="title">sfsfsff</h1>
        <p id="description"></p>
      </header>
      <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name">Name:</label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
        <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name">Name:</label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
        <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name">Name:</label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
        <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name">Name:</label>
          <input
            id="name"
            type="text"
            name="name"
            placeholder="Enter your name"
          />
        </div>
      </form>
    </div>
  </body>
</html>

Hey! So, i copied it into a codepen and inspected element so i could see what’s going on.
It looks like your input is inheriting some values from chrome’s default stylesheet including a padding of 2px and border width of 2px. So, when you have your input width set to 100%, this sets the input element to 720px, but then chrome adds on top of that the padding and border (bringing it to 728px). You could either set your input so it’s not 100% to account for this padding and border, or you could add your own padding and border values (of zero) and it will make your input the same width as your container.

Also- you didnt close your form elements. I think you only need one form element per form, not per input.

Hope any of this helps!

yes!!
I haddes box-sizing: border-box; to the input and that works.
What do you thing about this solution ?

I’m still newer to HTML and CSS myself, so I cant quite say whether you might come up with issues or not using box-sizing: border-box;. What i did notice were just general issues with your code. I recommend running it through a code checker such as https://validator.w3.org/ and taking a look at what it says.

Thanks for your advice. I didn’t know that there was some validators. I will see that as soon as possible. :wink:

I write my code white VScode. Is ther a quick maner to make an URL in order to use it for the validator ?