Not being able to align the checkboxes

<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>Document</title>
    </head>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;

        }
        body {
            background-color: rgb(107, 151, 189);
            height: 90vh;
        }
        #survey-form{
            background-color: rgb(205, 219, 236);
            width: 55%;
            margin: 0 auto;
            padding: 1.75% 5%;
            border-radius: 3%;
        }
        
       .inquire{
            margin: 30px auto;
        }
        h1{
            text-align: center;
            font-family:'Trebuchet MS';
            margin: 10px auto 0px auto;
            padding: 1%;
        }
        p  {
            text-align: center;
            font-family: 'Trebuchet MS';
            font-weight: normal;
            font-size: 1.2em;
            margin:0 auto 1% auto;
            padding: 0.5%;
        }
        .inquire p{
            text-align: start;
        }
        .buttonOne{
            background-color: rgb(56, 150, 56);
            width: 100%;
            height: 3em;
            border-radius: 2%;
            font-size: 1.2em;
        }
      
        input, textarea, select{
            width: 100%;
            margin: 0px;
            padding: 1%;
            background-color: rgb(243, 239, 239);
        }
        
        #name-label,
        #email-label,
        #number-label{
            font-size: 1.2em;
            margin-top: 1%;
           
        }
        .radio{
            display: inline-flex;
            align-items: center;
            margin-left: 1%;
        }
        #myRadio{
            margin: 10px 10px;
        }
        .checkbox{
            display: inline-flex;
            align-items: center;
            margin-left: 1%;

        }
        #MyCheckbox{
         margin: 10px;
        }

    </style>
  
        <header>
            <h1 id="title">Behavioral Therapy Survey Form</h1>
            <p id="description">Taking the time to make effective assessments</p>
        </header>
        <body>
         
                <form id="survey-form">
               
                    <!--enter your name-->
                    <div class="inquire">
                        <label id="name-label" for="name">Name</label>
                        <input id="name" type="text" name="name" placeholder="Enter your Name" required="">
                    </div>
                    <!--enter your email-->
                    <div class="inquire">
                        <label id="email-label" for="email">E-mail</label><br/>
                        <input id="email" type="email" name="email" placeholder="Enter your Email" required="">
                    </div>
                    <!--enter your age-->
                    <div class="inquire">
                        <label id="number-label" for="number">Age (Optional)</label><br/>
                        <input id="number" type="number" name="age" placeholder="Age" min="18" max="99">
                    </div>
                    <!--1 Select how soon you need the service-->
                    <div class="inquire">
                        <p>How soon would you need services to be provided?</p>
                        <select id="dropdown" name="service" required="">
                            <option value="" disabled selected>Choose a desired time frame</option>
                            <option value="Emergency">Emergency</option>
                            <option value="In two weeks">In two weeks</option>
                            <option value="One month">One month</option>
                            <option value="In the next three months">In the next three months</option>
                            <option value="Only doing research">Only doing research</option>
                            <option value="Not in a rush">Not in a rush</option>
                        </select>
                    </div>
                    <!--Radio selection part-->
                    <div class="inquire">
                        <p>Do you think we offer the services that you need at the moment?</p>
                        <div>
                        <label for="myRadio" class="radio">   
                            <input id="myRadio" type="radio" name="service-match" value="definitely">               
                              Definitely</label>
                        </div>
                        <div>
                        <label for="myRadio" class="radio">
                            <input id="myRadio" type="radio" name="service-match" value="maybe">
                            Maybe</label>
                        </div>
                        <div>
                        <label for="myRadio" class="radio">
                            <input id="myRadio" type="radio" name="service-match" value="no">
                            No</label>
                        </div>
                     </div>
                     <!-- 2 Selection dropdown menu-->
                    <div class="inquire">
                        <p>What kind of professional best suits your needs?</p>
                        <select id="dropdown" name="service" required="">
                            <option value="" disabled selected>Select a needed service</option>
                            <option value="speech therapist">Speech Therapist</option>
                            <option value="occupational therapist">Occupational Therapist</option>
                            <option value="behavioral therapist">Behavioral Therapist</option>
                            <option value="Psychologist">Pyschologist</option>
                            <option value="Child therapist">Child Therapist</option>
                            <option value="clinical therapist">Clinical Therapist</option>
                        </select>
                    </div>
                    <!--Checkbox button selection-->
                    <div class="inquire">
                        <p>Are there other services you would like to find here? (check all that apply)</p>
                        <div>
                            <label for="MyCheckbox" class="checkbox">
                            <input id="MyCheckbox" type="checkbox" name="find" value="Books">
                            Books</label>
                        </div>
                        <div>
                            <label for="MyCheckbox" class="checkbox">
                            <input id="MyCheckbox" type="checkbox" name="find" value="Online Forum">
                            Online Forum</label>
                        </div>
                        <div>
                            <label for="MyCheckbox" class="checkbox">
                            <input id="MyCheckbox" type="checkbox" name="find" value="group meetups">
                            Group Meetups</label>
                        </div>
                        <div>
                            <label for="MyCheckbox" class="checkbox">
                            <input id="MyCheckbox" type="checkbox" name="find" value="additional resources">
                            Additional Resources</label>
                        </div>
                       <div>
                        <label for="MyCheckbox" class="checkbox">
                            <input id="MyCheckbox" type="checkbox" name="find" value="referrals">
                            Referrals</label>
                       </div>
                    </div>
                    <!--Text area for suggestions -->
                    <div class="inquire">
                        <p>Any comments or suggestions?</p>
                        <textarea name="message" id="" cols="30" rows="5" placeholder="Enter your comment here..."></textarea>
                    </div>
                   <!--Submit button-->
                    <div class="inquire">
                    <button type="submit" class="buttonOne" id="submit">Submit</button>
                    </div>
                    <!--enter your email + html5 validation error -->
                   
                    <!--enter a number in a field + html5 validation error for non-numbers and validation error for numbers outside of the range defined by min and max attributes-->
                   
                  
                </form>
           
        </body>
</html>
type or paste code here

Hey @santiaguson the reason is because you have set input width to 100% and checkboxes and radios are also inputs, you can get around this by using input:not() in css, example below

 input:not([type="checkbox"]):not([type="radio"]), textarea, select{
            width: 100%;
            margin: 0px;
            padding: 1%;
            background-color: rgb(243, 239, 239);
        }

Thank you so much!!
I hope my code was organized enough. At the moment I am doing freecodecamp and codecademy, with the goal of one day becoming a front end developer. I am looking for a mentor, let me know if that is something you are interested in. Again, thank you… it finally looks the way its suppose to :slight_smile: Have a good one!

1 Like

@santiaguson i haven’t really got the time to be a mentor atm mate, if you make a post about it maybe someone will be willing to be a mentor for you, i started here mate and now i have a full time job in software development so keep at it mate and you will get there :grinning:

That’s awesome! good for you. That’s my goal too. :+1:

1 Like