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 Adding Pages to a Website Add a New Page

Posted by Amber Reid-Sumter
Amber Reid-Sumter
490 Points

There's no space between the profile picture and the navigation under "About". I maybe missed a height adjust somewhere?

Problem: My profile picture is touching the navigation. I need it to have a space like it does in the video. However, I don't see where I may have went wrong with the height adjustment of the navigation on the "About" page.

Possible Solution: Something wrong with the nav height adjustment? Not sure where I went wrong. It needs to be the same height like under the "portfolio" page.

4 Answers

Khaleel Hamid
Khaleel Hamid
5,258 Points
Khaleel Hamid
Khaleel Hamid
5,258 Points

Under your header you have this

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

The margin should be

margin: 0 0 30px 0;

I'm not exactly sure if that would solve the issue, but you can give it a try.

Amber Reid-Sumter
Amber Reid-Sumter
490 Points

Problem Fixed, lol. Wow, it's amazing what little movement can do to mess up a code. Thank you so much!

Khaleel Hamid
Khaleel Hamid
5,258 Points
Khaleel Hamid
Khaleel Hamid
5,258 Points

Yay! Glad its working now and no problem :)

Khaleel Hamid
Khaleel Hamid
5,258 Points
Khaleel Hamid
Khaleel Hamid
5,258 Points

Can you post the code at all, so we can see it and try to help you out.

Amber Reid-Sumter
Amber Reid-Sumter
490 Points

Sure, I just did actually.

Khaleel Hamid
Khaleel Hamid
5,258 Points
Khaleel Hamid
Khaleel Hamid
5,258 Points

This should be your CSS for your profile pic

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

This is how the nav should be for 

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;
}
Amber Reid-Sumter
Amber Reid-Sumter
490 Points

Yeah, that's exactly what my nav and profile pic looks like. And I'm using Nick's picture. So I'm still not sure where it is I'm going wrong. Here's what I have for my 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 30px 0 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 10px;
}


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

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

.social-icon {
  width: 20px;
  height: 20px;
  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
}


/*************************************
PAGE: ABOUT
*************************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

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

body {
  background-color: #fff;
  color: #999; 
}

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

nav {
  background: #599a68; 
}

h1, h2 {
  color: #fff; 
}

a {
 color: #6ab47b; 
}

nav a, nav a:visited{
  color: #fff; 
}

nav a.selected, nav a:hover {
  color: #32673f;
} ```
Amber Reid-Sumter
Amber Reid-Sumter
490 Points
Amber Reid-Sumter
Amber Reid-Sumter
490 Points

Alright, thanks again. I got the code up, let's see if we can review what's wrong. I'm sure it's not the html, right?

Khaleel Hamid
Khaleel Hamid
5,258 Points
Khaleel Hamid
Khaleel Hamid
5,258 Points

When your typing your comment click the Markdown Cheatsheet and under code its those three backward slashes you need them at the top and bottom, so code needs to be in the middle.