Create a Horizontal Line Using the hr Element

Tell us what’s happening:

Your code so far


<style>
  h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4><del>  Google</del>Alphabet</h4>
  <hr 
      <em><p> Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element

1 Like

The hr tag should come between the title and the paragraph.
help me

You need to close it e.g. <hr>

2 Likes

Just Use <hr> between <h4> and <p> tags

1 Like

i have same issue and it didnt work! why ?

1 Like

I reset the lesson and did


between

and

and it works.

I am also having troubles getting past this lesson.

  1. Your code should add an hr tag to the markup. passed this one
  2. The hr tag should come between the title and the paragraph. but failed this one?

I cant find any tips on what I am missing, or if its an error on the site.

2 Likes

Use

Google was founded…


This worked for me, I guess their test case uses this order.
EDIT: didn’t realize using HTML formats actually works on comments…
but switch the order of the paragraph and emphasis (use em before p)

9 Likes

Lol, yes the HTML surprised me as well, when posted original question. That is why you see the screenshot. Thank you for your response, fixed the issue.

After you put the < HR> in and its still not working try to swap the < p >< em > to < em >< p > in the paragraph section.

11 Likes

After you put the < HR> in and its still not working try to swap the < p >< em > to < em >< p > in the paragraph section.

17 Likes

Thanks! This worked for me!

Yes , wrapping

tag in worked for me.

I don’t understand why let em tag wrap p tag can resolve this quiz.
is It a error/bug of this challenge?

1 Like

yes it is a bug in the challenge

3 Likes

Oh. I see. Someone reported this bug.

1 Like

Reset all the code. Then, to swap the < p >< em > to < em >< p > in the paragraph section. then, use hr tag between h4 and p it will work.

5 Likes

Thanks a lot for a solution… Work for me to here…

1 Like

hi asheavenist,
it’s my pleasure

Thank you for that comment!

1 Like