Build a Survey Form - help!

HTML-CSS
1

Tell us what’s happening:

I’m having issues in formatting a few parts of the survey form I’ve created and some parts overlapping few items of the survey form.

here is the html part of the labels and the radio that are being overlapped by the select dropdown

<div class="form-control">
      <p class="form-control">Which of the following best describes you?
        <select id="dropdown" name="role" class="form-control" required>
          <option disabled selected value>
            Select class standing</option>
          <option value="Freshman">Freshman</option>
          <option value="Sophomore">Sophomore</option>
          <option value="Junior">Junior</option>
          <option value="Senior">Senior</option>
        </select>
    </div>
    <div class="form-group">
      <p>Would you recommend NJCU to a friend?</p>
      <label>
        <input type="radio" name="user-recommend" value="definitely" class="input-radio" checked />Definetely</label>
      <label>
        <input type="radio" name="user-recommend" value="maybe" class="input-radio">Maybe</label>

      <label>
        <input type="radio" name="user-recommend" value="not sure" class="input-radio">Not Sure</label>
    </div>

I think I screw up somewhere in the css code.

here is the link of my codepen

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0.

Challenge: Build a Survey Form

Link to the challenge:

2

Also, how do I keep the same width of the form’s bacground not the website background?

example

image
image1361×495 129 KB

my actual page

image
image1920×511 200 KB

3

I was able to fix the issues I was having by reviewing the entire html. I’ve noticed that there were few thing that didn’t have the right class group and that caused the issues.

As for the CSS, I did notice that i was missing margins for the form{}