Input fields not showing past certain width - html

Question

This is driving me nuts! I'm hoping someone can help me...I'm pretty new to HTML and CSS.
I've got a sign-up form I'm trying to style on my website. Just first name, email and submit button. I want the two input fields to be on the same line (managed to achieve this), and have them take up 100% of the space. Then when the window shrinks down to mobile, they're on a line each. Mostly everything is working except the fields won't show past a certain width. I've tried a variety of combinations using width=100%, width=auto, width=..px...
Here's a screen shot of what it looks like at the moment:
http://www.marnielefevre.com/new/wp-content/uploads/2016/02/Screen-Shot-2016-02-22-at-4.10.20-pm.png
Here's a snippet of my relevant HTML...
<div class="fielddiv">
<div class="fieldrow"><label>First Name*</label>
<input name="firstname" required="" type="text" /></div>
<div class="fieldrow"><label>Email*</label>
<input name="email" required="" type="email" /></div>
<div style="padding-top: 40px; text-align: center;"><input type="submit" value="SIGN ME UP" /></div>
</div>
...and the CSS
.fielddiv {
text-align: center;
margin: auto;
width: auto;
}
.fieldrow {
display: inline-block;
margin: auto;
text-align: center;
padding-top: 20px;
min-width: 330px;
max-width: 800px;
}
I appreciate any help!!

Answer 1

Without knowing what the other code in your application is doing, I would suggest (blindly) the following;
.fielddiv {
display: flex;
}
.fieldrow {
flex: 1;
text-align: center;
}
.fieldrow:first-child {
margin-right: 20px;
}

Answer 2

Please use below code in your application, it will increase width of textbox for your page:
.fielddiv input[type="text"] {
width:100%;
}
.fielddiv input[type="email"] {
width:100%;
}
OR
.fielddiv input[type="text"] {
width:100% !important;
}
.fielddiv input[type="email"] {
width:100% !important;
}
Hope this will meet your requirement.