Not able to continue in Accessibility Quiz page - Inline block and text align for input/label

Tell us what’s happening:
I have no idea what I am doing wrong. I have tried a lot of different combinations and I am at it for two hours. I am at ‘learn accessibility by building a quiz’, page 56.

Assignment:
" To align the input boxes with each other, set the display property to inline-block for all input and label elements within .info elements.

Also, align the text to the right."

Your code so far

info input {
  width: 50%;
  text-align: left;
}

.info label {
  width: 10%;
  min-width: 55px;
  text-align: right;
}

.info > label {
    text-align: right;
  display: inline-block;
} 

.info > input {
  text-align: right;
  display: inline-block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0

Challenge: Step 56

Link to the challenge:

OK, I’ll admit, I am not crazy about how this step works. There are several acceptable ways to complete this but the tests are only accepting one way and the instructions do not make this clear and are depending on the hints to guide you. So don’t feel too bad that you aren’t getting this. And to be honest, I’m not crazy about what the tests are demanding.

Anyhoo, here’s some pointers:

  • The tests want you to add just one rule, not two. So you need to combine .info > label and .info > input.
  • Your new CSS needs to be added above the existing rules for .info input and .info label. The reason for this is that you are setting text-align to right for both inputs and labels but then .info input sets it back to left below. So your new CSS needs to be placed before that so it doesn’t override it.
1 Like

Thank you so much. I thought i was going insane. Your solution solved it right away!