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 Styling Web Pages and Navigation Build Navigation with Unordered Lists

Posted by Simon Sporrong
Simon Sporrong
35,097 Points

nav li { display: inline-block; } doesn't work for me. Nothing happens.

Here's the HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fanny Bengtsson | Veterinär</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>Fanny Bengtsson</h1>
        <h2>Veterinär</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/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="en gubbe>
              <p>Experiment med grejer</p>
            </a>
          </li>
           <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="en gubbe">
              <p>Experiment med grejer</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="en gubbe">
              <p>Experiment med grejer</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="en gubbe">
              <p>Experiment med grejer</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="en gubbe">
              <p>Experiment med grejer</p>
            </a>
          </li>
           </ul>
      </section>
      <footer>
        <a href="http://twitter.com/simonsporrong"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/fanny.bengtsson.16"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2017 Simon Sporrong.</p>
       </footer>
      </div>
  </body>
</html>

And the CSS:

/****************************************
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
****************************************/

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

#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;
}

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

nav li {
  display: inline-block;
}

/****************************************
Footer
****************************************/


footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  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;
}

#gallery li a p {
 margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}


/****************************************
Colors
****************************************/


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

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

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

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

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

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

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

In the Navigation-section: the "nav li" rule doesn't do anything for me, the links ar just on top och eachother as before. What am i doing wrong? Thanks in advance!

Steven Sullivan
Steven Sullivan
11,616 Points

Code looks correct. I'm assuming your HTML and CSS pages are saved and they don't have the red dot?

Simon Sporrong
Simon Sporrong
35,097 Points

You're assuming correctly. Tried saving and refreshing a bunch of times. It's like the "nav li" rule can change anything. I can type "block" or "inline" or even "none" but it doesn't change anything.

Steven Sullivan
Steven Sullivan
11,616 Points

Try adding a after li.

nav li a { display: inline-block; }

Steven Sullivan
Steven Sullivan
11,616 Points

Additionally, try it without li and only a.

nav a { display: inline-block; }

4 Answers

Leandro Botella Penalva
Leandro Botella Penalva
17,618 Points

I've found something strange,

nav li { display: inline-block; }

between the "li" and the "{" there is no space character even though it seems to. I suggest you to rewrite the entire line manually.

You can use this website when you encounter cases like this one for further information: https://jigsaw.w3.org/css-validator/

Simon Sporrong
Simon Sporrong
35,097 Points

Wow that's weird but it did work! Thank you so much :) And you to Steven!

Simon Sporrong
Simon Sporrong
35,097 Points
Simon Sporrong
Simon Sporrong
35,097 Points

Thanks but that doesn't do anything either. Wtf am I doing wrong? :P

Steven Sullivan
Steven Sullivan
11,616 Points

All I can see is that your spacing is a little bit different than mine, but whitespace doesn't really matter in HTML. Not sure man! If I come up with something I'll let you know!

Leandro Botella Penalva
Leandro Botella Penalva
17,618 Points
Leandro Botella Penalva
Leandro Botella Penalva
17,618 Points

You missed a double quote in the alt attribute on this HTML line:

<img src="img/numbers-01.jpg" alt="en gubbe>

Simon Sporrong
Simon Sporrong
35,097 Points

Thanks, but it's not that either. Any other guesses? :)

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

Use clear both in the wrapper. Instructor never showed this step.

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both; /*removes white space at top*/
}