Radio buttons centered instead of aligned left

HTML-CSS
1

Hello,

I am currently working on my survey project. My radio buttons (and checkmark boxes) are strangely positioned on my page and I can’t figure out why. Currently, they appear to be centered. How do I fix this?

What I am attempting to do is have the buttons to the left of the text and correctly in-line. I have been having trouble moving the buttons anywhere and don’t know why they are on the center of the page in the first place.

Here is my CodePen link.

This is the code I suspect is causing issues somewhere.

HTML:

<div class="line radio">
      <p>Do you plan to visit Bramblebanks Township again?</p>
      <label><input name="user-recommend" value="definitely" type="radio" class="input-radio" checked />Yes</label>
      <label><input name="user-recommend" value="definitely" type="radio" class="input-radio" />Maybe</label>
      <label><input name="user-recommend" value="definitely" type="radio" class="input-radio" />No</label>
      <label><input name="user-recommend" value="definitely" type="radio" class="input-radio" />Unsure</label>
    </div>

Relevant CSS:

.line {
  margin: 15px;
  padding: 10px;
  display: block;
  align-items: left;
}

input,button,select,textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
}

.input-radio,
.input-checkbox {
  display: block;
  margin-right: 0.6rem;
  min-height: 1.5rem;
  min-width: 1.5rem;
}

input {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

I’ve attempted using text-align: left or align-items: left in several classes (the ones listed above in the CSS). I am also not sure why the button is so far away from the label text, and haven’t found much online that helps me with this issue.

(I feel like this is a simple fix that I’m not seeing, but have looked at it for a while and don’t see what’s wrong.)

2

The tag selector input has a width of 100%.
Classes are more flexible and will only affect the elements they are applied to rather than ALL of the same tag.

3