Over Placed Input Text Area

[shinn_thant]

Hello,
I am currently accomplishing Survey Form Project from Responsive Web Design Course. I have some problem as in shown in the photo. My input text area is taking placed rather than it should place. I have no idea how to fix this problem. Please help me.

Here’s is my code.

index.html

<div>
  <label for="name">Name</label>
  <input class="full-width" type="text" name="name" id="name" placeholder="Enter your name" required>
</div>
<div>
  <label for="email">Email</label>
  <input class="full-width" type="email" name="email" id="email" placeholder="Enter your email" required>
</div>
<div>
  <label for="age">Age (optional)</label>
  <input class="full-width" type="number" name="age" id="age" min="18" max="100" placeholder="Age" required>
</div>

style.css

.full-width, select, textarea {
  font-family: 'Open Sans', sans-serif;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: rgb(39, 39, 39);
  width: 100%;
  padding: 8px;
  border-radius: 5px;
}

[tioung]

Try this:

*{
   box-sizing: border-box;
}

If it works, google the code.

[shinn_thant]

Thank you so much. It works.

[tioung]

FYI, it will be easier to get help if you put your code in an online editor such as codepen and provide the link to it.

[shinn_thant]

Ah, I forget to use Codepen, anyway thank you for your information.