Learn Accessibility by Building a Quiz - Step 56

[WarriorWebWorx]

cannot get the solution-tried to combine ‘label’ and ‘input’ together to set the CSS and tried separate. The return error reads:
You should set the text-align: right property before the .info input rule.

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

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.37

Challenge: Learn Accessibility by Building a Quiz - Step 56

Link to the challenge:

freeCodeCamp.org

[hbar1st]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[WarriorWebWorx]

Thanks! only my second post…was wondering about the error msg! lol

[hbar1st]

the message is there to tell you to copy and paste your code into the post because your code is too big to be automatically copied in. (and it gives you a handy code block to use)

[hbar1st]

@WarriorWebWorx

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

move this section above the other 2 selectors in your post.

(if you notice, when you first started this exercise there was a mysterious empty line at the top of the editor? This was a subtle hint to write your new code there)

[WarriorWebWorx]

@hbar1st, Thanks! that did the trick. I am curious however…

in my limited exposure to CSS elsewhere I found it really didn’t make a difference which order things were in. Is that not true? If so, why is it needed here?

Thanks!

[hbar1st]

All code in general is read top to bottom (and there is some languages that order as well the commands in a single line, in this case left to right)
So naturally the first thing the browser reads will come first in the page ( an h1 element for eg).
However you can manipulate the order with css…
But in this case though, we are trying to make use of the cascading stylesheet rules (rules declared first cascade down to the next ones unless they are specifically overridden)

[WarriorWebWorx]

@hbar1st , Believe it or not that info was very clear and helpful! It appears taking the time to keep things in order as they appear in your HTML file will make sure they “click” with each other! I do understand how to add rules in to “override” others as well. Thanks again!