Why do I have the error: "The hr tag should come between the title and the paragraph."

HTML-CSS
1

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><s>Google</s>Alphabet</h4>
        <hr>
        
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </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 (Macintosh; Intel Mac OS X 10_14) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15.

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

2

There is an error in this challenge you can skip this and move on.

3

Change

<p><em>Google...</p></em>

to

<em><p>Google...</p></em>

and it will work. As said above there is a bug in this one.

4

I tried it, it works, I was going crazy about it…

5

It’s just a way to overcome the bug, but officially it is wrong wrapping p elements with an em,
since em is an inline element and p is block element.

1 Like
6

I was wondering, as earlier the em was inside the p element…
OS normally it would work the way I wrote it?

7

It should work the way you wrote, since it has a bug it is not letting it pass, and someone had eventually found this hack. From that it became a method to pass this challenge.

8

I kinda wish that the workaround hadn’t been found. How many people now think it’s OK to nest p elements within em elements?

9

Yeah i wish too, but it’s okay to know that workaround but we should be aware of the elements that we use and handle ( That’s More Important )

1 Like
10

If it’s a problem with the test, why don’t they fix it so more newbies like me don’t get confused???

11

Apparently it’s been fixed in the code, but the code hasn’t been released yet. Seems to have been a problem for over a month now too.

1 Like