input type="text" grid items are shrinking when centered with grid properties

I'm trying to make the text input fields take at least 90% of the form div (the blue area) and remain the position centered.

The form div is a grid within its parent grid, the main container. It is in the CSS for the form's div that I set its contents to be centered, however the input fields shrink as a result.

Can anyone suggest any solutions?

I thought of getting rid of any properties for centering the content and just increasing the width of the input fields to 100%, while increasing the padding of the form div.

But I'm really stubborn to keep the width of the input lower than 100%.

*{
    box-sizing: border-box; 
}

#container {
    
    width: 90%;
    margin: auto;
    background: silver;
    padding: 20px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "header"
    "content"
    "footer";

    justify-items: center;
}
#header {
    text-align: center;
    grid-area: header;
}

#survey-form {
    
    width: 70%;
    background: blue;
    padding: 30px;

    grid-area: content;
    display: grid;


}

.form-group {
    justify-self: center;
}

.form-group label{
display: block;
}

.form-group input[type="text"] {
    width: 90%;
    height: 30px;
    
    border-radius: 10px;

}

<!DOCTYPE html>
<htmL>
<head>
    <title>Survey Page</title>
    <link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>

<body>
    <div id="container">
        <header id="header">
            <h1 id="title">Take this survey</h1>
            <p id="description">Seriously just take it now while I think about the caption.</p>
        </header>

        <form id="survey-form">

        <div class="form-group">
            <label id="name-label" for="name">Name</label>
            <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
        </div>

        <div class="form-group">
            <label id="email-label" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
        </div>

        <div class="form-group">
            <label id="number-label" for="number">Age</label>
            <input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
        </div>

        <footer>
            
        </footer>

        </form>
    </div>

</body>
</htmL>

Solution

Hopefully this is what your looking for.

   *{
    box-sizing: border-box; 
}

#container {
    
    width: 90%;
    margin: auto;
    background: silver;
    padding: 20px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "header"
    "content"
    "footer";

    justify-items: center;
}
#header {
    text-align: center;
    grid-area: header;
}

#survey-form {
    
    width: 70%;
    background: blue;
    padding: 30px;

    grid-area: content;
    display: grid;


}

.form-group {
    margin:auto;
    width:90%;
}

.form-group label{
display: block;
color:white;
}

.form-group input[type="text"],.form-group input[type="email"] {
    width: 100%;
    height: 30px;
    margin:auto;
    border-radius: 10px;

}

<!DOCTYPE html>
<htmL>
<head>
    <title>Survey Page</title>
    <link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>

<body>
    <div id="container">
        <header id="header">
            <h1 id="title">Take this survey</h1>
            <p id="description">Seriously just take it now while I think about the caption.</p>
        </header>

        <form id="survey-form">

        <div class="form-group">
            <label id="name-label" for="name">Name</label>
            <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
        </div>

        <div class="form-group">
            <label id="email-label" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
        </div>

        <div class="form-group">
            <label id="number-label" for="number">Age</label>
            <input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
        </div>

        <footer>
            
        </footer>

        </form>
    </div>