Survey Form Project - got stuck

I was working on the Survey Form Prject using only html and css. Rather than doing a unique one, I just tried cloning the task as it was easier since context is provided.

Somehow lost track and now stuck with 2 problems :

  1. Couldn’t set the border width for some reason as if you check it it is covering the whole page while I want it to cover only the form.
  2. I couldn’t move the checkbox and radio to the left as currently it is in the center and it looks weird.

My advice would be to start over with the CSS by getting rid of all the flex/grids you are currently using as you don’t need them for such a simple page. If you want to keep the form centered on the page then center the form element itself, not every individual element inside the form.

Be careful about using width: 100% on some inputs. I don’t think you want to do that for radio buttons and check boxes. Most people expect the radio button/check box to be next to its associated label.

Don’t use <br> to create line breaks/vertical spacing, it is considered bad form. You should not need any <br>s on your page.

Aha really appreciated, will take that into consideration and change it accordingly. If I do get stuck again, I’ll just post here as people do reply and help which is amazing.

Hi, so I have already made a post here like few hours ago about this project.

Was recommended to remove the
in my html code as well as re-write the css code as it seems like I made it confusing than needed. So after working on it for a bit I rewrote it but there are still issues which I am not sure how to approach.


  1. I’ll like the radio and checkboxes to be on the left as well as the text next to it.
  2. The questions to be on the left with a margin or some kind of seperater/divider from the answers.
  3. The background for some reason even though when I zoom out a lot the whole screen has the pink overlay, there are times when it bugs.
    Attached a picture to clarify what I mean.

As I mentioned previously, you don’t want to put a width of 100% on those inputs.

Aha was just trying to clone that idea from the project sample provided, removing it fixed the issue with the radio and checkbox.
Not sure if we can even say that they are issues, but how do I align them to the left rather than center and Screenshot from 2020-09-13 22-30-32 Why is this the only that the form is on the right side but not on a seperate line?

They are being aligned to the center because their parent has text-align: center set. Remove that from the parent element and they will all align to the left.