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

Posted by Matt McNally
Matt McNally
516 Points

Header and Footer not quite right.

Either my header or navigation is not quite centered, they look slightly out of sync with each other. Also, my footer is not centered and still appears to the left. I have been following along with the videos and can't see where the code is any different. Any help would be greatly appreciated.

Matt McNally
Matt McNally
516 Points

'

/**************************************
GENERAL
**************************************/

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

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

a {
  text-decoration: none;
}

img { 
  max-width: 100%;
}

/**************************************
HEADING
**************************************/

header { 
  float: left;
  margin: 0 0 30px 0;     /* Top Right Bottom Left */
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align:center;
  margin: 0;
}

h1 {
  font-family: 'Oswald', sans-serif;
  margin: 15px 0;
  font-size:1.75em;
  font-weight: normal;     /* Headline is naturally bold, this makes normal*/
  line-height: 0.8em;
}

h2 {
 font-size: 0.75em;
 margin: -5px 0 0;   /* 3 Values: Top, Left/Right, Bottom */
 font-weight: normal;
}



/**************************************
NAVIGATION
**************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav u {
  list-style:: none;
  margin: 0 10px     /* 0 margin on top and bottom, 10px margin on left and right*/
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



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

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

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

3 Answers

Olga Kireeva
Olga Kireeva
9,609 Points
Olga Kireeva
Olga Kireeva
9,609 Points

Hi Matt, it would be easy to find a problem if you have posted html code also. Why do you use text-align-last instead of just text-align? As far as I know, text-align-last property only works when text-align property set to justify. You can also try to set the width for the footer and right/left margin to auto.

Kester Browne
Kester Browne
24,414 Points
Kester Browne
Kester Browne
24,414 Points

Why did you float the header?

If you float something, you have to clear the float.

Matt McNally
Matt McNally
516 Points
Matt McNally
Matt McNally
516 Points

Figured out the nav problem was just some typos. Getting rid of the "-last" and using just text-align did the trick and centered my footer, thanks for the help!