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

Posted by Brad Linkie
Brad Linkie
1,772 Points

Can't figure out why theres still bullet points beside my nav section

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> BLANK | Cake Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Blank</h1>
        <h2>Cake Designer</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/catinthehatcake.jpg">
              <img src="img/catinthehatcake.jpg" alt="">
              <p>Cat in the hat cake.</p>
            </a>  
          </li>
          <li>
            <a href="img/monkeycake.jpg">
              <img src="img/monkeycake.jpg" alt="">
              <p>Monkey with bananas cake.</p>
            </a>  
          </li>
          <li>
            <a href="img/fishcake.jpg">
              <img src="img/fishcake.jpg" alt="">
              <p>Fresh caught fish cake.</p>
            </a>  
          </li>
          <li>
            <a href="img/shoecake.jpg">
              <img src="img/shoecake.jpg" alt="">
              <p>Cake with a heel shoe on top.</p>
            </a>  
          </li>
          <li>
            <a href="img/dragoncake.jpg">
              <img src="img/dragoncake.jpg" alt="">
              <p>Dragon breathing fire on a tower cake.</p>
            </a>  
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2016 </p>
      </footer>
    </div>  
  </body>  
</html>

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

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/******************************************
Heading
*******************************************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  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;
}



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

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



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

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}



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

/* site body */
body {
  background-color: #fff;
  color: #999;
}

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

/* nav background on mobile devices */
nav {
  background: #599a68;
}

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

/* links */
a {
  color: #6ab47b;
}

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

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

3 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I see where you applied list-style: none; to the #gallery list.

:point_right: But it doesn't seem that you applied that style to the list in <nav>.

Did you intend to? You could do something like this:

nav ul {
  list-style: none;
}
Nathan Tallack
Nathan Tallack
22,164 Points
Nathan Tallack
Nathan Tallack
22,164 Points

You need to have a list style of none for your nav's id unordered list. Just like you have on your gallery class.

One way to do it is like this.

nav ul {
    list-style-type: none;
}
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

:x: That's not going to work with that colon after ul.

Nathan Tallack
Nathan Tallack
22,164 Points
Nathan Tallack
Nathan Tallack
22,164 Points

Well picked up my man! :)

Dangers of typing in two windows at once and not paying attention. ;)

Brad Linkie
Brad Linkie
1,772 Points
Brad Linkie
Brad Linkie
1,772 Points

Thanks a lot, I can't believe I forgot that!