Survey forum help!

So I’m trying to get my paragraphs to go to the left side of the form, I’ve been trying to put my text-align to the left but it’s not doing anything. What am I missing and what CSS can I use to move them over so they aren’t just in the middle of the form? Thanks!

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

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

#name-label {
    text-align: left;
    margin-left: 0;
}


#survey-form {
    max-width: 500px;
    padding: 20px;
    background-color: #f9f9f9;
}

#survey-form>div {
    margin-bottom: 10px;
}

#survey-form>div>p {
    text-align: center;
    margin-bottom: 5px;
}

#comments {
    height: 150px;
    width: 100%;
}

#submit {
    display: block;
    margin-top: 10px;
}
<!DOCTYPE html>
<html>

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

<body>
    <header>
        <h1 id="title" class="text-center">freeCodeCamp Survey Form</h1>
        <p id="description" class="description-text-center">Thank you for taking the time to help us improve the platform</p>
    </header>
    <div>
        <form id="survey-form">
            <div class="form-group">
                <label for="name" id="name-label">Name</label>
                <input type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="form-group">
                <label for="email" id="email-label">Email</label>
                <input type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="form-group">
                <label for="number" id="number-label">Age <span class="clue">(optional)</span></label>
                <input type="number" id="number" placeholder="Age" min="16" max="100" required>
            </div>
            <div class="form-group">
                <p for="dropdown">What best describes your current role?</p>
                <select id="dropdown" placeholder="Select current role" class="form-control">
                    <option disabled selected value>Select current role</option>
                    <option value="Student">Student</option>
                    <option value="full-time">Full Time Job</option>
                    <option value="learner">Full Time Learner</option>
                    <option value="prefer-no">Prefer not to say</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div class="form-group">
                <p>Would you recommend freeCodeCamp to a friend?</p>
                <label>
                    <input class="input-radio" type="radio" name="radio-group" value="definitely"> Definitely
                </label>
                <label>
                    <input class="input-radio" type="radio" name="radio-group" value="maybe"> Maybe
                </label>
                <label>
                    <input class="input-radio" type="radio" name="radio-group" value="not-sure"> Not sure
                </label>
            </div>
            <div class="form-group">
                <p for="dropdown">What is your favorite feature of freeCodeCamp?</p>
                <select id="dropdown-menu" placeholder="Select an option">
                    <option value="" disabled selected>Select an option</option>
                    <option value="challenges">Challenges</option>
                    <option value="projects">Projects</option>
                    <option value="community">Community</option>
                    <option value="open-source">Open Source</option>
                </select>
            </div>
            <div class="form-group">
                <p>Choose multiple options:</p>
                <input type="checkbox" name="checkbox-group" value="front-end"> Front-end Projects
                <input type="checkbox" name="checkbox-group" value="back-end"> Back-end Projects
                <input type="checkbox" name="checkbox-group" value="data-visualization"> Data Visualization
                <input type="checkbox" name="checkbox-group" value="challenges"> Challenges
                <input type="checkbox" name="checkbox-group" value="open-source"> Open Source Community
                <input type="checkbox" name="checkbox-group" value="gitter-help"> Gitter help rooms
                <input type="checkbox" name="checkbox-group" value="videos"> Videos
                <input type="checkbox" name="checkbox-group" value="city-meetups"> City Meetups
                <input type="checkbox" name="checkbox-group" value="wiki"> Wiki
                <input type="checkbox" name="checkbox-group" value="forum"> Forum
                <input type="checkbox" name="checkbox-group" value="additional-courses"> Additional Courses
            </div>
            <div class="form-group">
                <p for="comments">Additional Comments or Suggestions?</p>
                <textarea id="comments" placeholder="Enter your comments here..."></textarea>
            </div>
            <div class="form-group">
                <button type="submit" id="submit">Submit</button>
            </div>
        </form>
    </div>
</body>

</html>```

So you are looking for this?

1 Like

yes that is what I am looking to do, can you give me some hints? I’m trying to figure it out but have a little mental block right now lol

I changed the text align for this selector here

1 Like

wow, guess I need to take a break for a little bit haha! Thank you!

sure no problem :+1:

Also, you could omit the text-align property all together and it will naturally align to the left

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