Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Adding Pages to a Website Add Iconography

Joe Williams
Joe Williams
4,014 Points
Posted by Joe Williams
Joe Williams
4,014 Points

I am supposed to remove the margin, padding and bullet points, but no matter what I do, they remain when I view the page

I'm supposed to remove the bullet points, margin and padding to the phone number, email and twitter handle from the "Contact Details" section of my HTML. Yet not matter what I do, they remain the same. I've listed my HTML and CSS below. 

<html>

  <head>
    <meta charset="utf-8">
    <title>Joe Williams | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>

  <body>

    <header>
      <a href="index.html" id="logo">
        <h1>Joe Williams</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul> 
          <li><a href="index.html">Portfolio </a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
     <div id="wrapper"> 
      <section>
        <h3>General Information</h3>
        <p>I am not currently for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me.</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section>
       <h3>Contact Details</h3>
        <ul class="contact-info">
            <li class="phone"><a href="tel:555-6424">555-6424</a></li>
            <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
            <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=mellamojoe">@mellamojoe</a></li>
        </ul>
        </section>
        <footer>
        <a href="https://www.twitter.com/mellamojoe"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <a href="https://wwww.facebook.com/mellamojoe"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
        <p>&copy; 2014 Joe Williams.</p>
        </footer>
   </div>
  </body>
</html>

Here is my CSS. The goal being to remove the margin, padding, bullet points and make the font slightly smaller. What am I doing wrong? 

.contact-style {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;

}

3 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

You are using the wrong class name. In your css you are using .contact-style and in your html you are using class="contact-info". I would recommend changing your css from .contact-style to .contact-info.

Brendan Albert
Brendan Albert
32,954 Points
Brendan Albert
Brendan Albert
32,954 Points

Aha! Hopefully this will be read by someone encountering the same difficulty. I had the same issue and from looking at Joe's posted code I saw what my issue was. I had forgotten to enclose my ul line items in the contact.html tab with a forward slash ul. Tricksy!

Joe Williams
Joe Williams
4,014 Points
Joe Williams
Joe Williams
4,014 Points

OH MAN! I've spent almost 45 minutes trying to figure this out, and that's all it was? I can't believe that was staring me in the face. Thank you so much!

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

When I ran into issues like this as a beginner, and less frequently even now, I would always do a sanity check. Go to the html, copy the class/Id, and paste into the css. Even now I have to do this something because I'll misspell something in a way that isn't obvious.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Truly, I am thankful there is constant and patient students in the forum, it is the closest most of us can get to pair programming.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Not a problem. In fact, I find that helping others debug their code helps me to recognize problems with my code more easily.