Learn Accessibility by Building a Quiz - Step 56

HTML-CSS
#1

Step 56

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.

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

#2

This looks right to me. Perhaps you accidentally change something else in the CSS that is causing the test to fail. We’d need to see all of your CSS to help you. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

#3 
  font-size: 16px;
}



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

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

.info label, .info input {
  display: inline-block;
  text-align: right;
} ````````
#4

Ahh, I see now. The new rule set you added for .info label, .info input needs to come before the .info input and .info label rule sets. Otherwise, you are undoing the text-align: left; in the .info input rule set.

2 Likes
#5

Funny how this worked like magic. Please can we be friends. I need a friend who can giv e me some time boost and understanding. Thank you soooooo much already.