I need help checking my code, because I can’t figure out what I am doing wrong:
.question-block{
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
<!-- file: index.html -->
/* file: styles.css */
/* User Editable Region */
.question-block{
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
Learn Accessibility by Building a Quiz - Step 58
Hi and welcome to the forum 
Could you share your full code? Also, a link to the project would help.
Help By using this you can create your post and add your code here.
Kindly use and and share your code.
Hope You Understand.
Hi
Yes ofc!
The link to the project: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-58
Sorry I am not sure how to share the full code. Do I just copy the whole HTML and CSS file and insert in the text comment?
Hi thanks for the guide. I am still not sure how to share the full code. If I submit a ticket through the help buttom, does it automatically share the full code or do I have to copy/ paste it into the text area?
I need help checking my code in the css file. It keeps saying use the .question-block selector.
This is the code I need help with:
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" alt="freeCodeCamp" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="selector">Can the CSS margin property accept negative values?</label>
</div>
<div class="answer">
<select name="selector" id="selector" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-textarea" name="css-questions" rows="5" cols="24"></textarea>
</div>
</div>
</section>
<button type="submit">Send</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
```css
/* file: styles.css */
/* User Editable Region */
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;
top: 0;
}
#logo {
width: max(10rem, 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: 1rem;
}
.info label, .info input {
display: inline-block;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
text-align: right;
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
h3::before {
content: "Question #";
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* User Editable Region */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Learn Accessibility by Building a Quiz - Step 58
I think I figured it out. Here is the full code: Learn Accessibility by Building a Quiz - Step 58
It is not advised to create multiple topics.
Here’s how to post your code in the forum:
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 (').
Hi again,
You need to close this selector.
Good luck!
I have merged your two topics, please do not open multiple topics for the same challenge
