Having problems with my code

Hi, everyone
I have just created a survey form and everything else looks okay apart from the alignment of my Radio and Checkboxes. I have used inline-block which was supposed to work but it didn’t work. I need some help.

This is my code so far https://codepen.io/Ochukwuenyem/full/OJVwKpX

    @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

    * {

        box-sizing: border-box;
    }

    body {

        font-family: 'Raleway', sans-serif;
        margin: 0;
        text-align: center;
        background-image: linear-gradient(115deg,
                rgba(58, 58, 158, 0.8),
                rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;


    }

    form {

        max-width: 500px;
        margin: 0 auto;
        background-image: linear-gradient(#37B9E9, grey);
        padding: 30px 20px;
        border-radius: 3px;
    }


    h1 {

        margin: 0;
        text-align: center;
        color: white;
    }

    h1+p {

        margin-top: 8px;
        text-align: center;
        color: white;
    }


    .form-control {

        max-width: 450px;
        margin-bottom: 30px;
        color: white;
        text-align: left;
        display: block;
        width: 100%;

    }

    .form-control input[type="radio"],
    .form-control input[type="checkbox"] {

        display: block;
        width: auto;
    }

    .form-control label {

        margin-top: 20px;
    }

    .form-control input,
    .form-control select,
    .form-control textarea {

        width: 100%;
        display: block;
        margin-top: 8px;
        border-radius: 3px;
        padding: 6px;
        border: 1px solid #ffffff;
        font-family: 'raleway', sans-serif;
        font-size: 15px;
        resize: vertical;
    }

    #comments {

        height: 150px;
    }

    #submit-button {

        color: white;
        background: #37B9E9;
        border: 1px solid #777777;
        width: 100%;
        padding: 10px;
        border-radius: 3px;
    }

</style>
<h1 id="title"> freeCodeCamp Survey Form</h1>
<p><i id="description">Thank you for taking the time to help us improve the platform</i></p>


<form id="survey-form">

    <div class="form-control">

        <label for="name" value="name" id="name-label">Name</label>

        <input type="name" placeholder="Enter Your Name" required>

    </div>

    <div class="form-control">

        <label for="email" value="email" id="email-label">Email</label>

        <input type="email" placeholder="Enter Your Email" required>

    </div>

    <div class="form-control">

        <label for="age" value="age" id="number-label">Age (Optional)</label>

        <input type="number" min="10" max="200" placeholder="How old are you?">

    </div>

    <div class="form-control">

        <label for="role" value="role">Which option best describes your current role?

        </label>

        <select>

            <option selected>Select current role</option>
            <option>Student</option>
            <option>Full Time Job</option>
            <option>Full Time Learner</option>
            <option>Prefer not to say</option>
            <option>Other</option>


        </select>

    </div>

    <div class="form-control">

        <label>Would you recommend freeCodeCamp to a friend?</label>

        <label for="recommend-1"><input type="radio" name="recommend"> Definitely</label>
        <label for="recommend-2"><input type="radio" name="recommend"> Maybe</label>
        <label for="recommend-3"><input type="radio" name="recommend"> Not sure</label>


    </div>

    <div class="form-control">

        <label for="role" value="role">What is your favorite feature of freeCodeCamp?

        </label>

        <select>

            <option selected>Select an option</option>
            <option>Challenges</option>
            <option>Projects</option>
            <option>Community</option>
            <option>Open Source</option>

        </select>

    </div>

    <div class="form-control">

        <label>What would you like to see improved? (Check all that apply)

        </label>

        <label for="improve-1"><input type="checkbox" name="improve-1"> Front-end Projects
        </label>
        <label for="improve-2"><input type="checkbox" name="improve-2"> Back-end Projects</label>
        <label for="improve-3"><input type="checkbox" name="improve-3"> Data Visualization
        </label>
        <label for="improve-4"><input type="checkbox" name="improve-4">Challenges
        </label>
        <label for="improve-5"><input type="checkbox" name="improve-5"> Open Source Community
        </label>
        <label for="improve-6"><input type="checkbox" name="improve-6"> Gitter help rooms
        </label>
        <label for="improve-7"><input type="checkbox" name="improve-7"> Videos</label>
        <label for="improve-8"><input type="checkbox" name="improve-8">City Meetups
        </label>
        <label for="improve-9"><input type="checkbox" name="improve-9">Wiki
        </label>
        <label for="improve-10"><input type="checkbox" name="improve-10"> Forum
        </label>
        <label for="improve-11"><input type="checkbox" name="improve-11"> Additional Courses
        </label>

    </div>

    <div class="form-control">

        <label>Any comments or suggestions?

        </label>

        <textarea id="comments" placeholder="Enter your comment here..."></textarea>

    </div>

    <div class="form-control">

        <input type="button" value="SUBMIT" id="submit-button">
    </div>

</form>

type or paste code here

Welcome @Ochukwuenyem.

Since you have not provided a link to your code, it would be difficult to guide you to a solution. You also will need to explain what you expect your code to produce in terms of alignment.

Sorry I just did above. I need it to be aligned just as the freeCodecamp survey project radio buttons and the checkboxes. This https://codepen.io/freeCodeCamp/full/VPaoNP

Okay, I’ve figured out what my problem is. I just added display: block; to my labels and it works fine now. This topic may now be closed. Thx.