Survey Form Challenge (TextArea + Submit)

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;
    
}

I completely botched this. How can I post this without it looking like a mess?

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

Thank you so much for this.

I also tried adding padding to the right of the text area box and that’s not really working. It’s like no padding exists.

Update

I deleted the Rows and Cols in the code. Then I was able to change the width% in the styles sheet. The only thing missing is this submit button.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.