Survey Form Why the input width dont have the same length as the parent element?

[aprillindasylvia]

html > HTML Survey Form - Pastebin.com

@import url(‘https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@500&family=Ibarra+Real+Nova:wght@500&family=Lato:wght@300&family=Oswald&family=Quicksand:wght@400;700&family=Roboto+Mono:wght@600&display=swap’);

body {
font-family: ‘Roboto Mono’, sans-serif;
font-size: 1rem;
margin: 0;
padding:0;
background: linear-gradient(rgb(70,0,150),pink);
}

input {
display: block;
}

header {
text-align: center;
color: white;
}

main {
background: rgba(255, 255, 255, 0.65);
color: rgb(155, 50, 181);
width: 50%;
margin: 0px auto;
padding: 0px;
}

.form-control {
width: 100%;
margin: 0 auto;
display: block;
}

i already have the input width set to 100% to make it the same length as the div element (parent element) but why did it go much longer?

thank you

[carlosvisator]

Hi @aprillindasylvia

It is easier to help you if you share your HTML and CSS in JSBin, JSFiddle or Codepen, for example.
You have added display: block to input and .form-control, that it is the same target and also inputs are block elements, it could be interesting use inline-block if you want to add some margin on top and bottom but the input behave as an inline element.
I guess you are having problems because your parent element has not size set.
You can use this line in your code to make it easier to size everything:

* { border-box: border-box; } Box Sizing on W3Schools

And you can use outline property to highlight elements without affect your design. For example:

form {
  width: 50vw;
  outline: 5px yellow solid;
  padding: 1rem;
}

.form-control {
 width: 100%;
 margin: .5em auto;
 display: inline-block;
}

I am sorry this is not a solution but it might help you to understand your problem.
You also can use Browser Dev Tools; open it with F12 key or Inspect and check wich styles are applying and wich ones not working. And you could make test in real time too.

P.S. When you want zero padding, for example, or other property you should use 0, without units:

main {
        padding: 0 10em;
}

Let us know how are you doing. Good work by the way!!