Radio buttons below question not aligned to it

Question

I have been trying to align the position the radio buttons below the start of the questions but nothing seems to be working for me.

Here is my code:

<div class="form-row" [style.display]="this.Form.value.joiningAs == '2' || this.Form.value.joiningAs == '3' ? 'block' : 'none'">
  <div class="col-md-12 mb-3">
    <label for="hasProfile">
                            Has your company created their profile on our platform?
                        </label>
    <div class="form-check">
      <label class="form-check-label">
                                <input type="radio" class="radio" name="hasCompanyProfile" value="1" formControlName="hasCompanyProfile"
                                    [(ngModel)]="Form.value.hasCompanyProfile">
                                Yes
                            </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
                                <input type="radio" class="radio" name="hasCompanyProfile" value="2" formControlName="hasCompanyProfile"
                                    [(ngModel)]="Form.value.hasCompanyProfile">
                                No
                            </label>
    </div>
  </div>
</div>

Any help will be very appreciated. I've been spending too much time on this.

Answer 1

One way to do it is set "margin-left: -15px" (align the number manually so it fits your page) on the "form-check" class in CSS. Another way would be creating a 'div' element that will hold both the check-boxes and text. If that does not work then check you CSS probably "form-check" has some margin or padding properties

Answer 2

So you want to align the radio buttons left with the text?

.form-check-label > input {
    margin-left: 0;
}

I hope that solves your problem

Answer 3

In your CSS I would just set:

.radio {
  margin-left: 0;
}