Need help with elements positioning

I’m almost finishing the “Responsive Web Design Projects - Build a Survey Form” challenge, but I need help with some elements. I already tried youtube, google, etc., all the challenges tests are working, is more of a style point of view, which I’m really struggling to make it work fully.

In the first img, I would like to learn how to make it so all the input fields start at the orange line and have the same size, not only the first two ones.

In the second img, I would like to learn how to make all the checkboxes to start at the orange line, and so them don’t jump rows. Unlike the text-align: center.

In the final img, how do I make so the <p> stays at the center but when the min-width is X, it follows the scroll, is using media query the only way?

Here’s the pen: https://codepen.io/JAEN_C/full/GGZZPa/

Here are the imgs

You can use flexbox to do that. You’ll have to wrap your label-input pairs in their own <div>s, make those <div>s flex containers, etc. (also note: you forgot the closing </label> tags for the last two labels)

Here's how you might do it (click to show)
<!-- Doing this makes the `<br>`s unnecessary. That's not how they're supposed to be used anyway -->
<div class="input-flex"><!-- I don't know which name to give the class. If you have a more appropriate name, use that. -->
  <label ...>Name</label>
  <input ...>
</div>
<div class="input-flex">
  <label ...>Email</label>
  <input ...>
</div>
<div class="input-flex">
  <label ...>Age</label>
  <input ...>
</div>
.input-flex {
  display: flex;
  align-items: baseline; /* This makes sure that the label text is aligned with the input vertically. Try removing this to compare. */

  width: 70%; /* Tweak as much as you like */
  margin: auto; /* Center the thing horizontally */
}

/*
 Tweak the following numbers to fit.
  Roughly this means the label will take 1/4 of the horizontal space, while the input will take 3/4.
 */

.input-flex label {
  flex: 1;
}

.input-flex input {
  flex: 3;
  /* You may also want to add a `height` property
}

Similar to what I did above with the width and margin. Try adding a width property to #inputCheck, then set the margin to auto.

If I understand correctly, you want to make it so it’s not centered at some min-width X. You could use a media query for that. I’m not aware of another way.

Your solution worked like a charm, thanks!
I think it’s pretty much finished now, I’ll only try to make the form actually work so it sends me an e-mail.
One final question if I may, what would I have to do so the checkbox group starts more at right, and you mentioned that I’m misusing the <br>, how would be the better way to fix it, I’m trying to learn the most of it.

Instead of margin: auto, you can use just margin-left: auto (so the right-side margin is zero, and the whole thing is flushed to the right)

The recommended way to space elements is by using CSS (like using margin, for example).

According to MDN, screen readers pick up the presence of <br>s, and a series of <br>'s can get confusing for screen reader users.