Css problem I want to help

I do not understand. Why not pass the test?
Thank you for your help.

the challenge require to set display property,
and to only change input and label related to .info

althought you aligned input and label text to the right, that wasn’t what was asked of you

That’s what I thought at first,but also failed the test

interesting can you share the full code?

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

The code in the picture just now is my complete code

oh I meant the whole style.css

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

oh your code is missing two classes from the last challenge. they got deleted somehow.

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

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

restart the steps will put these back into the code then do the solution.

1 Like

Thank you very much, my problem is solved :smiley:

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