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

Bullet Points still appearing.

This is my code: dunno why the bulet points still show up.

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

14 Answers

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points

check this code

http://codepen.io/anon/pen/bekAd

I copied your HTML and CSS and added the CSS rule for the unordered list to remove the bullets.

Isn't it the result you want?

Thank you for the help, I really do appreciate it! I'll just have to change the images now.

Thank you again! :)

Hi, I have used that too, but still no luck..

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points

This works:

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

Thanks but still no luck..

Yes, and I have tried different browsers too..

No it's my own, I'm inputting it into the workspace.

/************************************************ GENERAL ************************************************/

body { font-family: 'Verdana', cursive;
}

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;

}

a { text-decoration: none;
}

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/************************************************ HEADING ************************************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1, { font-family: 'Cabin Sketch', cursive; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/************************************************ NAVIGATION ************************************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/************************************************ FOOTER ************************************************/

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc;
}

.social-icon { width: 20px; height: 20px; margin 0 5px; }

/************************************************ PAGE: PORTFOLIO ************************************************/

gallery {

margin: 0;
padding: 0;
list-style: none;

}

gallery li {

float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;

}

gallery li a p {

margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;

}

/************************************************ PAGE: ABOUT ************************************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/************************************************ PAGE: CONTACT ************************************************/

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

}

/************************************************ COLORS ************************************************/

/* site body */ body { background-color: #E44D2E; color: #FFEBCD; }

/* green header */ header { background: #FFF8DC; border-color: #599a68; }

/* nav background on mobile devices */ nav { background: #DEB000; color: #fff; }

/* logo text */ h1, h2 { color: #4169E1; }

/* links */ a { color: #4169E1; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #000; }

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mustafa Kasim | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Mustafa Kasim</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/IMG_2316.jpg"> <img src="img/IMG_2316.jpg" alt=""> <p>Experimentation with Filters</p> </a> </li> <li> <a href="img/IMG_2317.jpg"> <img src="img/IMG_2317.jpg" alt=""> <p>Exploring Japan</p> </a> </li> <li> <a href="img/IMG_2318.jpg"> <img src="img/IMG_2318.jpg" alt=""> <p>Serenity</p> </a> </li> <li> <a href="img/IMG_2324.jpg"> <img src="img/IMG_2324.jpg" alt=""> <p>Unrivalled Architecture</p> </a> </li> <li> <a href="img/IMG_2327.jpg"> <img src="img/IMG_2327.jpg" alt=""> <p>Passing through</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Mustafa Kasim.</p> </footer> </div> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mustafa Kasim | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Mustafa Kasim</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/IMG_2316.jpg"> <img src="img/IMG_2316.jpg" alt=""> <p>Experimentation with Filters</p> </a> </li> <li> <a href="img/IMG_2317.jpg"> <img src="img/IMG_2317.jpg" alt=""> <p>Exploring Japan</p> </a> </li> <li> <a href="img/IMG_2318.jpg"> <img src="img/IMG_2318.jpg" alt=""> <p>Serenity</p> </a> </li> <li> <a href="img/IMG_2324.jpg"> <img src="img/IMG_2324.jpg" alt=""> <p>Unrivalled Architecture</p> </a> </li> <li> <a href="img/IMG_2327.jpg"> <img src="img/IMG_2327.jpg" alt=""> <p>Passing through</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>&copy; 2014 Mustafa Kasim.</p> </footer> </div> </body> </html>

Im sorry but Im unsure of Markdown, its the first time I have heard of it..

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mustafa Kasim | Photographer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Mustafa Kasim</h1>
                <h2>Photographer</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>
            <ul id="gallery">
                <li>
                        <a href="img/IMG_2316.jpg">
                    <img src="img/IMG_2316.jpg" alt="">
                    <p>Experimentation with Filters</p>
                        </a>
                </li>
                <li>
                        <a href="img/IMG_2317.jpg">
                    <img src="img/IMG_2317.jpg" alt="">
                    <p>Exploring Japan</p>
                        </a>
                </li>
                <li>
                        <a href="img/IMG_2318.jpg">
                    <img src="img/IMG_2318.jpg" alt="">
                    <p>Serenity</p>
                        </a>
                </li>
                <li>
                        <a href="img/IMG_2324.jpg">
                    <img src="img/IMG_2324.jpg" alt="">
                    <p>Unrivalled Architecture</p>
                        </a>
                </li>
                <li>
                        <a href="img/IMG_2327.jpg">
                    <img src="img/IMG_2327.jpg" alt="">
                    <p>Passing through</p>
                        </a>
                </li>
            </ul>
        </section>
        <footer>
            <a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
            <a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
            <p>&copy; 2014 Mustafa Kasim.</p>
        </footer>
            </div>
    </body>
</html>
Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points

Ok the error is in that in the HTML you use an unordered list with id=gallery, so in the CSS change the selector to:

ul#gallery {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

Thank you for the reply.. but still nothing seems to change.

hmnnn this is very strange...