Oh boy, am I having trouble here. My textarea and submit button are all the way to the left. How can I place them in the middle. Also whenever I put 100% width on my textarea it goes beyond the container. How do I make it so it only spans up to the container.
I’m posting my code and css sheet below.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Political Survey</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<h1 id="title">American Politics</h1>
<p id="description">Thank you for being a true patriot!</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label">Name</label>
<input type="text" id="name" required placeholder="Enter Your Name" />
<label id="email-label">Email</label>
<input
type="text"
id="email"
required
placeholder="Enter Your Email"
/>
<label id="number-label">Age (Optional)</label>
<input
type="number"
id="age"
required
placeholder="Your Age"
min="0"
max="99"
/>
</div>
<div class="form-group">
<p>Which branch of government do you think is most efficient?</p>
<select name="branch" id="dropdown" class="form-select">
<option disabled selected value="">Select branch</option>
<option value="executive">Executive</option>
<option value="judicial">Judicial</option>
<option value="legislative">Legislative</option>
<option value="preferNo">Prefer Not To Say</option>
<option value="none">None</option>
</select>
</div>
<div class="form-group">
<p>Do you like the two party system?</p>
<label
><input
type="radio"
class="input-radio"
name="recommend"
value="Yes"
/>
Yes</label
>
<label>
<input
type="radio"
class="input-radio"
name="recommend"
value="maybe"
/>
Maybe</label
>
<label>
<input
type="radio"
class="input-radio"
name="recommend"
value="No"
/>
No</label
>
</div>
<div class="form-group">
<p>
Which of the following issues will affect your vote for the next election? (Check all
that apply)
</p>
<label>
<input
type="checkbox"
name="election"
value="inflation"
class="input-checkbox"
/>
Inflation
</label>
<label>
<input
type="checkbox"
name="election"
value="russia"
class="input-checkbox"
/>
Russia-Ukraine War
</label>
<label>
<input
type="checkbox"
name="election"
value="gun"
class="input-checkbox"
/>
Gun Violence
</label>
<label>
<input
type="checkbox"
name="election"
value="abortion"
class="input-checkbox"
/>
Abortion
</label>
</div>
<div class="form-group">
<p>Any Comments or Suggestions?</p>
<textarea
name="comment"
id="comment"
class="input-textarea"
placeholder="Enter your comment..."
></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">
Submit
</button>
</div>
</div>
</form>
</div>
</body>
</html>
* {
font-family: "Ubuntu", sans-serif;
color: #f3f3f3;
}
body {
background-color: #534fb0;
}
h1 {
margin: 0;
font-weight: 600;
text-align: center;
}
#description {
font-style: italic;
margin-top: 0.5rem;
text-align: center;
}
.container {
background-color: #7673bf;
margin: 0 20% 0 20%;
border: 1px solid whitesmoke;
}
.form-group{
padding-left: 1rem;
}
label {
display:block;
}
p {
text-align: left;
margin-bottom: .5rem;
margin: left 0.5em;
}
#email-label, #name-label, #number-label{
padding-top: 0.5rem;
}
select{
color:rgb(0, 0, 0, .7);
}
select option {
color: rgb(0, 0, 0, .7) }
textarea{
width: 98%;
box-sizing: border-box;
padding: 0.5rem;
height: 80px;
}
button{
color:rgb(0, 0, 0, .5);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
margin-bottom: 1rem;
width: 50%;
text-align: center;
}