Learn Accessibility by Building a Quiz - Step 47

HTML-CSS
1

Tell us what’s happening:
I am stuck on the problem of – You should give the header a justify-content of space-between. I have already done that as you can see in the code. I tried too refer to other posts in the forum but found no true solution. I referred to w3schools to add the justify-content: space-between syntax.

For this part --Tidy up the header , by using Flexbox to put space between the children, and vertically center them.
I have added the .fixed-header

Your code so far

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

/* Also tried alternatively to add this but still doesn't work
.fixed-header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
  /*justify-content: space-between;*/
}
##header{
#  display: flex;
#  justify-content: space-between;
#}
*/
.fixed-header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
  justify-content: space-between;

}

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

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

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

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

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;
}

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

h2 {
  border-bottom: 4px solid #dfdfe2;
}

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;
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Learn Accessibility by Building a Quiz - Step 47

Link to the challenge:

2

I don’t think the instructions asked you to add a fixed-header selector. I would restart the step and then only do what the instructions ask:

  • Use flexbox on the header to put space between the children and vertically center them
  • fix the header to the top of the viewport

This should all be done in the existing header ruleset.

Hint: Do not remove any of the existing properties in the header ruleset. You are only adding new ones.

3

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