I1243 Ola Oee zz

1

Been using the faaewawa

2

Hey,

First of all to fix a mistake in your code. From what I can see you’re nesting the row elements.

This is some of your code:

<div class="row">
      <div class="labels">
        <label id="email-label" for="email">* Email:</label>
      </div>
      <div class="inputs">
        <input id="email" type="email" placeholder="Email" required="">
      </div>
      
    <div class="row">
      <div class="labels">
        <label id="number-label" for="number">* Age:</label>
      </div>

As you can see you have a div class=“row” inside another div class=“row”.

I’m pretty sure that’s a mistake.

Fix that and the rows shouldn’t be getting mixed up.

But there are bigger problems here. The method you're using to center stuff is just not how it's done. It's very "hacky" as they say. That's fine because you're doing what you can, but if you're serious about web development you'll need to learn proper ways to do stuff.

I highly recommend you expand your foundation with learning outside of FCC. FCC is not good at all for learning, but is good for practice. The tutorials I did (which I found amazing) were the MDN web development tutorials (the best) and the Udemy Web Developer Bootcamp. Go through those otherwise you’ll always have issues like this where you won’t know the solution.

To answer your particular question, I recommend using flexbox.

Try something like:

<div class="row">
    <label for="labelID"> This is a label:</label>
    <input type="text" name="labelName" id="labelID>>
</div>

CSS:
.row {
display: flex;
justify-content: center;
}

If it doesn’t make sense to you why that works, I recommend going through those courses.

TLDR: Fix the nesting of the divs with class=“row”, they shouldn’t be nested. Go through some courses like MDN and Udemy Web Developer Bootcamp because it seems your understanding is quite lacking overall, and you’ll come across tons of issues you won’t be able to solve otherwise.