Trouble with "Create a Horizontal Line Using the hr Element" lesson

HTML-CSS
1

Hello, I’m having some trouble with the code editor not accepting my answer though I am almost certain it’s correct. The instructions are to add a horizontal rule between the h4 and p elements, but an error appears each time reading “the hr tag should appear between the title and the paragraph”. Am I doing something wrong?

The code below contains the hr element as I have entered it.


<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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 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

121 Likes
2

Hi, me again, I found a solution to this post soon after. The code editor accepts the answer as correct once you reverse the order of the p and em tags so that the em tag comes first and the p tag second. I thought I would share this to my own post, in case any one else was having this same issue, and looking here for a solution. :v:

81 Likes
3

Thanks for the hint, I was stuck on this for a while! This should probably be marked as a bug

11 Likes
4

I experienced the same issue! Thanks @SpaceCatInd for the workaround

5 Likes
5

thx a lot! You solved my promble!

2 Likes
6

I was also stuck, thank you @SpaceCatInd

2 Likes
7

No trouble at all, I’m glad this post was helpful. :slightly_smiling_face:

5 Likes
8 
 <h4><s>Google</s>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>

and

   <h4><s>Google</s>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>.</em></p>

both got accepted as correct answer, can some one tell me why? why do we have to switch and

in order to get it right? thanks in advance

5 Likes
9

thanks for this @SpaceCatInd buttell me why this happen, is the designing of code is not well??..

1 Like
10

@SpaceCatInd Thank you! Good grief I racked my brain on this.

2 Likes
11

thank you a lot , You solved my promblem

1 Like
12

@zoro
I think because html5 concern about the opening tags, closing tags are not required.

2 Likes
13

I got that bug too. Thanks for your solution, it worked!

2 Likes
14

@QuincyLarson Possible bug…

2 Likes
15

@ReveurGAM Thanks for letting me know - hope things are going well with you these days :slight_smile:

Could you create a GitHub issue for this? Then we can investigate it further and track it there. https://github.com/freeCodeCamp/freeCodeCamp/issues/new

4 Likes
16

Definitely a bug, because one of the previous lessons (https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text) explicitly requires that we nest the <em> tag inside the <p> tag.

3 Likes
17

Thank You so much :slight_smile: . I stucked on this challenge for 2 days :sweat_smile:

4 Likes
18

Thank you! Thank you!

2 Likes
19

it worked! Thank you so much

2 Likes
20

Thank You so much:grinning:
I have stuck on this challenge for a while.:joy:

this may be a bug.

2 Likes