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 trialJusto Montoya
3,799 PointsMy 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.
Justo Montoya
3,799 Pointsa {
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
10,654 PointsWhat'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
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
6,646 PointsThis will mess with any code you post after the nav.
Justo Montoya
3,799 Pointsthank you so much!!
Ariel Aronica
6,646 PointsNo problem! Happy coding!
Justo Montoya
3,799 Pointswell 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.
Tony Nguyen
24,934 PointsTony Nguyen
24,934 PointsIs it possible that you can show your full css code?