How to align-text left for radio button and checkboxes, after centering everything-CodePudding

I have 2 questions really. How can I align my radio buttons and checkboxes to the left of my already centered form-group in css.They are currently all center, but I want the checkboxes and radio buttons to be aligned to the left, but still in center. Also how can I make my form take up the whole page with a scroll bar like the example I will provide. everything current just sits at the top of page. Please let me know of any questions, really am stuck here and just need a little nudge. Thanks. Example: https://survey-form.freecodecamp.rocks/

.text-center {
  text-align: center;
  margin: auto;
}

.form-group {
  text-align: center;
  margin: auto;
}

.clue {
  text-align: center;
}

.input-checkboxes {
  text-align: center;
}

* {
  box-sizing: border-box;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  font-family: lato, arial;
}

body {
  background: url(images/tech2.webp);
  background-size: 100%;
  height: 100%;
}

.container {
  grid-column: 5 / 9;
  max-width: 600px;
  margin: 20px auto 20px;
  padding: 30px 30px 30px 30px;
  border: 1px solid black;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.763);
}

header {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

h1 {
  margin-bottom: 5px;
}

.checkbox,
.radio-button {
  display: block;
}

.form-grou>.inline {
  margin-right: 6px;
  text-align: left;
}

#submit {
  font-size: 16px;
  display: block;
  margin: 0 auto;
  background: #2f80ed;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
}

@media only screen and (max-width: 1000px) {
  .container {
    grid-column: 1 / 12;
  }
}

<header >
  <h1 id="title" >Survey Form</h1>
  <p id="description" >Thank you for taking the time to help me improve my skills as a developer</p>
</header>

<div >

  <form id="survey-form">
    <div >
      <label id="name-label" for="name">Name: 
          <input 
          required 
          id="name" 
          for="name"
          type="text" 
          placeholder="Name"></label><br/>
    </div>

    <div >
      <label id="email-label" for="email">Email: 
        <input 
        required 
        id="email" 
        type="email" 
        placeholder="E-mail"></label><br/>
    </div>

    <div >
      <label id="number-label" for="numebr">Age: 
        <input 
        required 
        id="number" 
        min="13" 
        max="120" type="number"
        placeholder="Age"></label><br/>
    </div>
    <div >
      <p>Which option best describes your current role?</p>
      <select for="dropdown" id="dropdown" name="role"  required>
        <option disabled selected>Seelct current role</option>
        <option value="student">Student</option>
        <option value="teacher">Teacher</option>
        <option value="job">Full time job coding</option>
        <option value="preferNo">Prefer not to say</option>
        <option value="other">Other</option>


      </select><br/>
    </div>
    <div >
      <label> Based on my portfolio/resume, would you say that I am job ready?<br/>
        <input 
        type="radio" 
        name="referal" 
         
        value="definitely" /> Definitely</label><br/>
      <label>
          <input 
          type="radio" 
          name="referal" 
           
          value="maybe" /> Maybe</label><br/>
      <label>
          <input 
          type="radio" 
          name="referal" 
           
          value="definitelyNot"/> Definitely not
              </label><br/>
    </div>
    <div >

      <label>In your opinion, what would you say is my strongest skill?<br/>
      <select id="improved" name="improved"  required>
          <option disabled selected>Seelct an option</option>
          <option value="html/css">HTML/CSS</option>
          <option value="javascript">Javascript</option>
          <option value="ui/ux">UI/UX Design</option>
          <option value="response">Responsiveness/Functionability</option>
          <option>Project Ideas</option>

      </select><br/>
      
      </label>
    </div>
    <div >

      <p>What would you like to see improved? <span >(Check all that apply)</span></p>
      <label>
          <input 
          type="checkbox" 
          name="improved" 
           
          value="frontend"/> Front-End skills<br/>
          <input 
          type="checkbox" 
          name="improved" 
          
          value="backend" /> Back-End skills<br/>
          <input 
          type="checkbox" 
          name="improved" 
          
          value="ui/ux"/> UI/UX Design<br/>
          <input 
          type="checkbox" 
          name="improved" 
          
          value="response"/> Responsiveness/Functionality<br/>
          <input 
          type="checkbox" 
          name="improved" 
          
          value="response" /> Project Ideas<br/>
          <input 
          type="checkbox" 
          name="improved" 
           
          value="number"/> Number of Projects<br/>

              </label>

    </div>
    <div >
      <p>Any other comments or suggestions?</p>
      <textarea name="comments" id="comments" rows="3" cols="30"  placeholder="Enter your comments here..."></textarea>
    </div>

    <div >
      <button type="submit" id="submit" >Submit
      </button>
    </div>

</div>
</form>
</div>

CodePudding user response：

You gave the div with the radio buttons the class .form-group. This class has a property align-center if you remove that from the div the buttons will align to the left.

If you give the .text-center to the <p> the tekst will align center

.text-center{
    text-align: center;
    margin: auto;
}

.form-group{
    text-align: center;
    margin: auto;
    
}


    

.clue{
    text-align: center;
}

.input-checkboxes{
    text-align: center;
}
* {
    box-sizing: border-box;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    font-family: lato, arial;}

body{
    background: url(images/tech2.webp);
    background-size: 100%;
    height: 100%;
}

.container{
    grid-column: 5 / 9;
    max-width: 600px;
    margin: 20px auto 20px;
    padding: 30px 30px 30px 30px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.763);
    
}
header{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
h1{
    margin-bottom: 5px;
}
.checkbox, .radio-button {
    display: block;
}
.form-grou > .inline {
    margin-right: 6px;
    text-align: left;
}


#submit {
    font-size: 16px;
    display: block;
    margin: 0 auto;
    background: #2f80ed;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
}
@media only screen and (max-width: 1000px) {
    .container {
        grid-column: 1 / 12;
    }
}

<!DOCTYPE html>

  <head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="styles.css">
    <title>Survey</title>

    
  </head>
  
  <header >
    <h1 id="title" >Survey Form</h1>
    <p id="description" >Thank you for taking the time to help me improve my skills as a developer</p>
    </header>

    <div >
    
    <form id="survey-form">
      <div >
        <label id="name-label" for="name">Name: 
          <input 
          required 
          id="name" 
          for="name"
          type="text" 
          placeholder="Name"></label><br/>
          </div>

      <div >
      <label id="email-label" for="email">Email: 
        <input 
        required 
        id="email" 
        type="email" 
        placeholder="E-mail"></label><br/>
        </div>
        
      <div >
      <label id="number-label" for="numebr">Age: 
        <input 
        required 
        id="number" 
        min="13" 
        max="120" type="number"
        placeholder="Age"></label><br/>
        </div>
        <div >
    <p>Which option best describes your current role?</p>
      <select for="dropdown" id="dropdown" name="role"  required>
          <option disabled selected>Seelct current role</option>
          <option value="student">Student</option>
          <option value="teacher">Teacher</option>
          <option value="job">Full time job coding</option>
          <option value="preferNo">Prefer not to say</option>
          <option value="other">Other</option>
         

      </select><br/>
      </div>
      <div>
      <label>  <p >Based on my portfolio/resume, would you say that I am job ready?<br/> </p>
        <input 
        type="radio" 
        name="referal" 
         
        value="definitely" /> Definitely</label><br/>
        <label>
          <input 
          type="radio" 
          name="referal" 
           
          value="maybe" /> Maybe</label><br/>
        <label>
          <input 
          type="radio" 
          name="referal" 
           
          value="definitelyNot"/> Definitely not
              </label><br/>
        </div>
        <div >

        <label>In your opinion, what would you say is my strongest skill?<br/>
      <select id="improved" name="improved"  required>
          <option disabled selected>Seelct an option</option>
          <option value="html/css">HTML/CSS</option>
          <option value="javascript">Javascript</option>
          <option value="ui/ux">UI/UX Design</option>
          <option value="response">Responsiveness/Functionability</option>
          <option>Project Ideas</option>

      </select><br/>
      
      </label>
      </div>
      <div>

      <p  >What would you like to see improved? <span >(Check all that apply)</span></p>
        <label>
          <input 
          type="checkbox" 
          name="improved" 
           
          value="frontend"/> Front-End skills<br/>
          <input 
          type="checkbox" 
          name="improved" 
          
          value="backend" /> Back-End skills<br/>
          <input 
          type="checkbox" 
          name="improved" 
          
          value="ui/ux"/> UI/UX Design<br/>
          <input 
          type="checkbox" 
          name="improved" 
          
          value="response"/> Responsiveness/Functionality<br/>
          <input 
          type="checkbox" 
          name="improved" 
          
          value="response" /> Project Ideas<br/>
          <input 
          type="checkbox" 
          name="improved" 
           
          value="number"/> Number of Projects<br/>

              </label>
        
    </div>
        <div >
        <p>Any other comments or suggestions?</p>
          <textarea 
          name="comments" 
          id="comments"
          rows="3" 
          cols="30" 
          
          placeholder="Enter your comments here..."></textarea>
              </div>
     
      <div >
      <button 
      type="submit" 
      id="submit" 
      >Submit
      </button>
    </div>

  </div>
  </form>
  </div>

CodePudding user response：

Remove the css of .text-center and .form-group