Learn Accessibility by Building a Quiz - Step 56

HTML-CSS
1

Tell us what’s happening:

Please Help!
I’m stucked at step 56.

Your code so far
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: nowrap;
border: 0;
}

**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36</code>

**Challenge:**  Learn Accessibility by Building a Quiz - Step 56

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-56
2

The hint is trying to tell you that you need to add your new rule set before the .info input rule set. This is because the .info input rule set is setting the text-align property to right and you don’t want to override that with your new rule set.

3

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