Learn accessibility by building a quiz

HTML-CSS
1

I keep failing on step 56. kept saying: You should set the text-align: right property before the .info input rule.
i’m stucked and confused already.need help please

here is my code

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

2

We need to see your entire CSS file in order 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.

My guess is that you are not putting this in the right place in the CSS file. It needs to go before the individual rule sets.

3 
body {
  background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

header {
  width: 100%;
	height: 50px;
	background-color: #1b1b32;
	display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
}

#logo {
  width: max(100px, 18vw);
	background-color: #0a0a23;
  aspect-ratio: 35 / 4;
	padding: 0.4rem;
}

h1 {
  color: #f1be32;
	font-size: min(5vw, 1.2em);
  text-align: center;
}

nav {
  width: 50%;
	max-width: 300px;
	height: 50px;
}

nav > ul {
  display: flex;
	justify-content: space-evenly;
  flex-wrap: wrap;
	align-items: center;
	padding-inline-start: 0;
	margin-block: 0;
	height: 100%;
}

nav > ul > li {
  color: #dfdfe2;
  margin: 0 0.2rem;
	padding: 0.2rem;
	display: block;
}

nav > ul > li:hover {
  background-color: #dfdfe2;
  color: #1b1b32;
  cursor: pointer;
}

li > a {
  color: inherit;
  text-decoration: none;
}

main {
  padding-top: 50px;
}

section {
  width: 80%;
  margin: 0 auto 10px auto;
  max-width: 600px;
}

h1,
h2 {
  font-family: Verdana, Tahoma;
}

h2 {
  border-bottom: 4px solid #dfdfe2;
  margin-top: 0px;
  padding-top: 60px;
}

.info {
  padding: 10px 0 0 5px;
}

.formrow {
  margin-top: 30px;
	padding: 0px 15px;
}

input {
  font-size: 16px;
}



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

.info > label {
  width: 10%;
  min-width: 55px;
  
}
.info > label, .info > input{
  display:inline-block;
  text-align:right;
}

p::before {
  content: "Question #";
}

.sr-only {
  position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: no-wrap;
	border: 0;
}
4

Yep, as I guessed, it needs to go before the two individual rules sets for .info > input and .info > label. That’s because you are setting text-align to right but then .info > input needs to set it to left. So if you put your new one after that then it wipes away the text-align for .info > .input.

5

I just did what you instructed ,it still didn’t work .

6

You need to show us what you did by pasting your update CSS in here.

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

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

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

here …

8

When I restart the step, the CSS I see is:

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

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

Notice there is no > between the elements. You have added these and they are confusing the test. Remove them all and you will pass.

In general, you should not add things you were not asked to as it may throw off the tests.

9

Okay!
it worked.
Thanks A lot for helping.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.