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
alexgarms
3,523 PointsThe space between my Portfolio link and About link is significantly larger than the space between About and Contact.
I've typed out the code exactly as was shown and seem to come up with this spacing problem. What may be causing this?
5 Answers
Jeff Busch
19,287 PointsCan we see the code?
alexgarms
3,523 Points/**************** 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; }
nav a { font-weight: 800; padding: 15px 5px; }
/*********************** FOOTER ***********************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 30px; height: 30px; 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;
}
/************************ COLORS ************************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ 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; }
alexgarms
3,523 PointsI'm not sure how to properly post it. I'm writing in notepad++. I copied the code and pasted it and it came out like that above.
Jeff Busch
19,287 PointsHi Alex,
I didn't see anything in your code to cause exactly what I think you described but I did find some errors. Below is the code with corrections.
Also, if you look just below the text box area you will see something that says Markdown Cheetsheet. Also, there is a post here titled: Posting Code to the Forum by Dave McFarland. If you don't understand that maybe this will make sense: How to display code at Treehouse.
Jeff
/**************** GENERAL ****************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper { /*<----- No Hash sign ****/
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 { /*<----- No Hash sign ****/
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;
}
nav a {
font-weight: 800;
padding: 15px 10px; /*<------ You had padding: 15px 5px; ***/
}
/*********************** FOOTER ***********************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px; /*<------ You had width: 30px; ***/
height: 20px; /*<------ You had height: 30px; ***/
margin: 0 5px;
}
/************************ PAGE: PORTFOLIO ************************/
#gallery { /*<----- No Hash sign ****/
margin: 0;
padding: 0;
list-style: none;
}
#gallery li{ /*<----- No Hash sign ****/
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p { /*<----- No Hash sign ****/
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;
}
/* nav background on mobile */
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; }
alexgarms
3,523 PointsThank you for the links on how to post code. The hashtags are in my code, they must have not copied to my post. I've made a different adjustment to padding to try and minimize the look of the space between Portfolio and About. The social icon I've set different because I'm using different pictures than the ones provided. I've played around with the nav a portion of code and the spacing between Portfolio and About remains about double than About and Contact. Thank you for your answer
Pav Cieslak
808 PointsPav Cieslak
808 PointsHi Alex, there must be a typo within the code, but without us seeing it first, we won't be able to answer this question. Share it and someone will deffinetly help you out.