Positioning input within div - html

Question

I have a div container. Between this div i have another div named model and there is a input file type.
Now when i open up this in my mozilla firefox browser all are looks good. Problem is when i clicked Browse... then it's didn't open to upload a file, but when i clicked outside of Browse... field then it open to upload a file. Here is my html file
input{
margin-bottom: 15px;
padding: 10px;
width: 100%;
box-sizing: border-box;
border-radius: 5px;
height: 50px;
border:0px;
font-family: georgia;
font-size: 12pt;
text-align: center;
}
<div class="container">
<div class="model">
<form>
<div>
<label>Profile Picture</label>
<input type="file" name="img">
</div>
</form>
</div>
</div>
I google it but didn't find any good resource that's helpful for this problem . Sugesstion please . Thank you !

Answer 1

You need to change your CSS code a bit. Try this.
input {
margin-bottom: 15px;
margin-top: 15px;
box-sizing: border-box;
border-radius: 5px;
height: 50px;
border: 0px;
font-family: georgia;
font-size: 12pt;
display: block;
}

Answer 2

As a way to debug the area of the button, you can use the outline attribute.
You set the width: 100%, so it takes the whole line as a block.
Adding the outline attribute and you may see it.
input{
margin-bottom: 15px;
width: 85px;
box-sizing: border-box;
border-radius: 5px;
height: 40px;
border:0px;
font-family: georgia;
font-size: 12pt;
text-align: center;
outline: 1px solid #FF0000;
}
<div class="container">
<div class="model">
<form>
<div>
<label>Profile Picture</label>
<input type="file" name="img">
</div>
</form>
</div>
</div>