Form-input element width

HTML-CSS
#1

Hello,
html file

<html lang="en">
  <body>
    <form action="https://register-demo.freecodecamp.org">
      <fieldset>
        <label>Enter your name <input type="text" name="name"></label>
        <label>Upload Profile Picture <input type="file" name="profile" required></label>
        <input type="submit" value="Submit">
      </fieldset>
    </form>
  </body>
</html>

CSS file

form{
  width:60vw;
  max-width:500px;
  min-width:300px;
  margin: auto auto;
}

label{
  display:block;
  margin: 0.5rem 0;
}

input{
  /*giving its parent width*/
  width:100%;
  margin: 10px 0 0 0;
}

output

output
output1915×593 24.3 KB

Why isn’t the “choose file” taking up the entire width of the form?

#2

Input is an inline element, even if you have made the label a block element, input is not a block element, so it doesn’t grow in width.
Try giving it a display of block

#3

Using developer tools, I can see that "choose file " takes up the entire width but is left aligned, in contrast to “input - text” and “input - submit,” which are both growing and taking up the entire width.