Build a Survey Form question/informative inquiry

Tell us what’s happening:
Two things:

  1. trying to figure out why my list item sections (green border) aren’t on the same vertical line.
  2. trying to figure out how adding padding-left to my container (red border) shrinks the container rather than enlarging it. (adding padding actually fixes the alignment I’m having, but I don’t understand how adding padding reduces the container size when it should do the opposite.)

appreciate it!


Your code so far
https://codepen.io/pbartlett/pen/jgLLVR?editors=1100

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36.

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

  1. This effect is more noticeable with a paragraph of text. When text is centered it produces ragged left and right edges. With this in mind, look at the left and right margins. They’re all even. The length of the row including blue and red changes because of the content.

  2. All ul s and ol s and dl s have a decoration which you turned off, but the area where the decoration goes is still there. In developer tools it says it is margin-left:40px; Your .userchoice {margin-left: 0px;} removes it.

.userchoice must go on the ul which it is not on the checkbox list.