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>
