Hey guys, please help me, Am having some stubborn underline text

Tell us what’s happening:

please am some stubborn underline text that don’t want disappear. I has tried everything I could but isn’t work out, below are my code and also a link: https://codepen.io/cassyblaise/pen/aBjoZN

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Product landing page</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div id="wrapper">
      <header id="header">
        <div class="logo">
          <img id=header-img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo"/>
        </div>
        <nav class="nav-bar">
          <ul id="nav-li">
            <li><a class="nav-link" href="#features">Features</a></li>
            <li><a class="nav-link" href="#how-it-work">How it work</a></li>
            <li><a class="nav-link" href="#pricing">Pricing</a></li>
          </ul>
        </nav>
      </header>
        <section id="hero">
          <h2 class="top">Handcrafted, home-made masterpieces</h2>
          <form id="form">
            <input name="email" id="email" type="email" placeholder="enter your email address" required/>
            <input id="submit" type="submit" value="Get started" class="btn">
          </form>
          </h2>
        </section>
      
      <div class="container">
        <section class="features">
          <div class="grid">
            <div class="icon">
              <i class="fa fa-3x fa-fire"></i>
            </div>
              <div class="dist">
                <h2> Premium Materials</h2>
                <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
              </div>
              <div class="grid">
                <div class="icon">
                  <i class="fa fa-3x fa-truck"></i>
                </div>
                  <div class="dist">
                    <h2>Fast Shipping</h2>
                    <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
                    </div>
              </div>
                <div class="grid">
                  <div class="icon">
                    <i class="fa fa-3x fa-battery-full" arid-hidden="true"></i>
            </div>
                    <div class="dist">
                      <h2>Quality Assurance</h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                      </div>
          </div>
        </section>
          <section id="how-it-work">
                      <iframe id="video" height="312" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                    </section>
                    <section id="pricing">
                      <div id="tenor">
                        <div class="level">Tenor Trombones</div>
                        <h2>$600</h2>
                        <ol>
                          <li>Great playlist</li>
                          <li>Play Tenor</li>
                          <li>Back Play</li>
                          <li>Front Play</li>
                        </ol>
                        <button class="btn">Select</button>
                      </div>
                      <div id="bass">
                        <div class="level">Bass Trombones</div>
                          <h2>$1000</h2>
                          <ol>
                            <li>Bass Playlist</li>
                            <li>Play Bass</li>
                            <li>Bass Play</li>
                            <li>Front Bass</li>
                          </ol>
                        <button class="btn">Select</button>
                      </div>
                      <div id="valve">
                        <div class="level">Valve Trombones</div>
                        <h2>$1500</h2>
                        <ol>
                          <li>Valve Playlist</li>
                          <li>Great Valve</li>
                          <li>Play Valve</li>
                          <li>Back Valve</li>
                        </ol>
                        <button class="btn">Select</button>
                      </div>
             </section>
                    <footer>
                      <ul>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="#">Terms</a></li>
                        <li><a href="">Contact</a></li>
                      </ul> 
                      <span>&copy 2018, Original Trombones</span>
            <!--
Am stil working on this.
                      <div class="social_center">
                      <a href="https://www.facebook.com/Obokcasmir/" class="fa fa-facebook fa-2x social"></a>
                      <a href="https://twitter.com/cassyjnr/" class="fa fa-twitter fa-2x social"></a>
                      </div>
  -->
               </footer>
      </div>
    </div>
  </body>
</html>
  

```css

body{
  font: 15px/1.5 Arial, Halvetical, san-serif;
  background-color: #eee;
  margin: ;
  padding: ;
}

/*Global*/
#wrapper{
  position: relative;
}

/*header*/
#header{
  top: 0;
  background-color: #354248;
  color: #ffffff;
  padding-top: 0px 20px;
  min-height: 80px;
  border-bottom: #e8491d  3px solid;
  diplay: flex;
  justify-content: space-around;
  align-items: center;
}

 header a {
  color: #ffffff;
  text-decoration: none;
  text-tranform: uppercase;
  font-size: 16px;
}

header li{
  float:left;
  display: inline;
  padding: 0 20px 0 20px;
}

nav{
  float: right;
  margin-top:10px;
}

img{
  height: 100%;
  width: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;

}

#hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 50px;
  height: 200px;
}

.top{
  margin-bottom:20px;
  word-wrap: break-word;
}

input[type="email"]{
  max-width: 250px;
  width: 100%;
  padding: 5px;
}

input[type="submit"]{
  max-width: 150px;
  width: 100%;
  padding: 20px;
  margin: 15px 0;
  border: 0;
  background-color: #f1c40f;
}

#submit:hover{
  background-color: #e8491d;
  transition: background-color 1s;
}

/*feastures*/
.features{
  margin-top: 40px;
}

.icon{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: #e8491d;
  float: left;
}

.dist{
  display: inline;
  flex-direction: column;
  justify-content: center;
  height: 120px;
  width: 80vw;
  padding: 5px;
}

#how-it-work{
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

iframe{
 max-width: 500px;
  width:100%;
}

/*Pricing*/

#pricing {
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(3, 1fr);
}

#tenor, #bass, #valve{
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width calc:(100% / 3);
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
}

.level{
  background-color: #ddd;
  color: black;
  width: 100%;
  padding: 15px 0;
  text-transform: uppercase;
  font-weight: 500;
}

h2{
 margin-top: 15px; 
}

a {
  list-style: none;
  text-decoration: none;
  cursor: pointer;
  color: black;
}

ol, li{
  margin-top: 15px 0;
  padding: 5px 0;
  list-style: none;
}

button{
  margin: 15px 0;
  border: 0;
  background-color: #f1c40f;
  font-weight: 400;
}

button:hover{
  background-color:  #e8491d;
  transform: backgroud-color 1s;
}

/*footer*/

footer{
  margin-top: 10px;
  background-color:#ddd;
  padding: 20px; 
}

footer a{
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  list-style:none;
}

footer ul{
  margin: 0;
  padding: 0;
}

footer li{
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
  margin: 10px;
}

span{
  margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    font-size: 0.9em;
    color: #444;
}
/* Am still working on this 
.social_center {
  padding: 20px 0;
  background-color: #dedede;
}
*/

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript

I don’t see any underlined text. Are you talking about the links when you hover over them?

1 Like

If that is what you mean the solution is:

a:hover {
text-decoration: none;
}

1 Like

yea, I mean the link when you hover over them, those underline text.

Thank bro, its work.