How to make input field to fit whole width of container

I’m trying to get my three input fields to extend across the container its made using flexbox

.contact-form{
	max-width: 550px;
	margin: 0 auto;
	background:#011627ff;
	padding: 30px;
	border-radius: 5px;
	display: flex;
	box-shadow: 0 0 10px #011627ff;



}

.input-fields{
	display: flex;
	flex-direction: column;
	margin-right: 4%;
}
.input-fields textarea{
	width: 48%
}
.input-fields .input textarea{
	margin: 10px 0;
	background:transparent;
	border: 0;
	border-bottom: 2px solid;
	padding: 10px;
	width: 100%
	background-color:#011627ff;

	

}

textarea{
	height: 212px;
	margin-top: 10px;
}
.input-button{
	 margin-left : 200px;
	 margin-top: 400px;


}
label{
	color: white;
}

    <form class="contact-form">
    	<div class="input-fields">
    	<label for="name">Full Name</label>
    	<input type="text" name="name" required="name" placeholder="Enter Your Name" class="input" >
    	<label for="email">Email</label>
    	<input type="email" name="email" required="email" placeholder="Enter An Email" class="input">
    	<label for="number">Phone Number</label>
    	<input type="number" name="number" required="number"
    	placeholder="Enter Your Phone Number"
    	class="input">
        <textarea placeholder="additional comments">Additional Comments</textarea>
    </div>
     <div>
    	<input type="submit" value="submit" class="input-button">
    
    </div>
    </form>
![Screen Shot 2020-12-15 at 8.35.25 AM|690x431](upload://w0YcUJ1NU9gK7abHEUKKJB8fvdB.jpeg) 

Here is the image

Try removing display:flex from your .contact-form. You might have to reposition your submit button afterwards.