Aligning and centering the Checkboxes/Labels

Finished the project but I’m having some issues with style. I can’t seem to get my checkboxes and labels aligned without the boxes being thrown off? Any idea how to do this? As well, my description id at the top doesn’t seem to center even though I styled it to be centered. Not sure why, any feedback is highly appriciated.

https://codepen.io/arsgpo/pen/KKNxBEX

Hi there,

In your CSS, there’s a couple places where you have display: flex-box. I think you mean display: flex.

:wink:

Welcome to the forums @nexusdecay. Your form looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button
  • User’s should not have to delete text from the textarea when entering their text. This is a bad UX.
  • Maybe revisit this lesson to group like elements. It may even help in styling.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

To help you see how you have your elements set up temporarily add the following global reset;

* { 
  border: solid 1px red;
}
1 Like

So I got rid of the issues in w3 validator and the brackets, but everything in a div and made them centered so it looks good, but I still can’t figure out how to align the check boxes.

But this was a good lesson that I really need to go through some info on positions and flex boxes and such .
Any help on the check box alignment would be helpful.

use vertical alignment on both the label and the input