Q: Vertical Align Radio and Checkbox Button Labels and Input Elements I have looked at other vertical align questions and answers but cannot seem to find an answer that works. I was wondering if any of you clever people knew how to fix my problem. And how deep I may have gone into my hole.
You can view my code here: https://github.com/LukeBennettUK/techdegree_project_3

I am trying to align these together. I have tried making them flex items and then adding margin-bottom. But the bottom item seems to have a larger margin between the one above for some reason like below: 

Very fussy I know. But I just want them all to be aligned correctly. Thank you.

A: Flexbox is magical and it's going to change your life. I haven't used float in my code for the past year and I'm loving it! LOL
In the example below I apply flex to the parent container that holds the input and label. justify-content aligns everything to the left while align-items perfectly centers all children inside.
Here is an excellent resource that will teach you all of the cool layouts you can build with flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


ul{
  list-style-type:none;
}

.newsletter-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
<ul>
  <li class="newsletter-row">
     <input type="checkbox" id="css_nl" value="css" name="css_news">
     <label for="css_nl">CSS News</label>
  </li>
</ul>



A: idk how you broke it but here's a solution. your check boxes have 15px margin on right and bottom. put 15px all around and that will do the trick. I downloaded your code and tested it myself.  
