Survey Form Trouble

HTML-CSS
1

I know how to get on the elements on the page but am having trouble putting everything side by side. I ended up deleting what I had in CSS because it kept overlapping each other.

I have looked through past CSS lessons and google searched and still having trouble understanding how to organize everything

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

2

Doesn’t look like anyone got back to you about this, but at first glance I think the side by side issue is related to how you’ve structured your elements.

Here’s a bit of your code as an example:

<div id="name">
  <label id="name-label" for="name"> What's Your Name? 
    <input type"text" name="name" required placeholder="Enter Your Name" class="inputs" id="name-fill">
</label>
</div>

Consider adjusting things to something more like this:

<div> <!-- wraps the whole row -->
    <div> <!-- wraps the label on the left -->
      <label></label>
    </div>
    <div> <!-- wraps the input on the right -->
      <input>
    </div>
</div>

With that structure you can add css styling to affect the left label and right input more specifically.

I’ve also seen some posts related to this in the forum that tie back to class=“rowTab” which you can check more into here