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

CSS How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Justo Montoya
Justo Montoya
3,799 Points
Posted by Justo Montoya
Justo Montoya
3,799 Points

My Nav links (about,portfolio,contact) are still not formatting correctly .

when I put[ nav li {display: inline-block;} ] my portfolio,about & contact links do not line up as they do in the example. I'm not sure why.

Tony Nguyen
Tony Nguyen
24,934 Points
Tony Nguyen
Tony Nguyen
24,934 Points

Is it possible that you can show your full css code?

Justo Montoya
Justo Montoya
3,799 Points
Justo Montoya
Justo Montoya
3,799 Points 
a {
text-decoration: none;
}

img {
    max-width:100%;
}

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

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

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

/*link color*/
a {
color:#fff;
}

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;

}

/******
color
*******/

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

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

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

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

p {
color:#000;
}

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

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

/*selected nav link*/
nav a.selected, nav a:hover {
color:#32673f;
}
/******
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;
}

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

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

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

/******
about
*******/
.profile-photo {
display: block;
max-width: 150 px;
margin: 0 auto 30 px;
border-radius: 100%;
}
Walter Bueso
Walter Bueso
10,654 Points
Walter Bueso
Walter Bueso
10,654 Points

What's wrong with the with how the links are lined up given the css code below and how is it supposed to look?

2 Answers

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points 
/*nav background on mobile*/
nav{
background:#599a68


p {
color:#000;
}

/******
navigation
*******/
******************

You are missing a closing bracket after your nav before paragraph.

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

This will mess with any code you post after the nav.

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

No problem! Happy coding!

Justo Montoya
Justo Montoya
3,799 Points
Justo Montoya
Justo Montoya
3,799 Points

well the website options (about,portfolio,contact) are still stacked on top of each other as if it were in an UL LI without the CSS modification. my understanding is that nav li { display:inline-block; } makes it line up.