Learn Accessibility by Building a Quiz - Step 49 - z8QMwYSsbBl91E42x_TRo

[Clems69]

Tell us what’s happening:
On small screens, the unordered list in the navigation bar overflows the right side of the screen.

Fix this by using Flexbox to wrap the ul content. Then, set the following CSS properties to correctly align the text:

align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%

I’m stuck in this step (49) with the error message of " You should give the ul a margin-block of 0 .

Your code so far
nav > ul {
display: flex;
justify-content: space-evenly;
align-items: center;
padding-inline-start: 0;
height: 100%;
flex-wrap: wrap;
margin-block: 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/80.0.3987.132 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 49

Link to the challenge:

freeCodeCamp.org

[bbsmooth]

@Clems69

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

I just tested this code and it passed for me. If it is still not passing for you then I’m guessing you might have accidentally deleted something in the surrounding CSS that is causing the test to fail. Check to make sure you didn’t accidentally delete the closing curly brace on the ruleset above this one. If you still can’t get it working then please paste your entire CSS in here.

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.

[Clems69]

All the curly for the ruleset are intact but for some reasons the error is specifying that my code doesn’t have the “margin-block” property.

[bbsmooth]

Please paste your entire CSS in here. It’s not that I don’t believe you, but even the best of us sometimes miss something that other people will find for you. Because the one ruleset you posted above is correct. So there must be something else going on here.

[Clems69]

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

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

[bbsmooth]

Thank you for indulging me Ya, all of your CSS looks good. So I think the issue may be that you are using an old version of Chrome that doesn’t support the margin-block property. I just checked and it looks like Chrome didn’t start supporting it until v87 and you are on v80 if I am not mistaken. So upgrade Chrome to the newest version and then this step should pass with your CSS.

[Clems69]

Thank you so much for your time. I’ll upgrade my chrome now and run the code. Hopefully I’ll bring a positive feedback.

[Clems69]

This solved the issue. Thank you for your time.