My footer is stuck on the top of my page, pushing my gallery to the left.

Question

I am working on the "Build a Website" and for some reason my footer keeps moving to the righthand top of the page, and pushing my gallery to the left, off center. My gallery is no longer resizing the elements to fit the webpage as is adjusts, and the footer moves to the top. Is something wrong with my wrapper? please help, ive been stuck for days.
ALL MY CSS CODE: 
/***************
GENERAL
***************/
/***********
TO ADD FONT, FIRST ADD CODE TO HTML BETWEEN NORMALIZE AND MAIN.CSS
***********/
body {
font-family: 'Snippet', sans-serif;
}
a {
text-decoration: none;
}
img {
  max-width: 100%;
}
wrapper{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a{
  color: #0000bb;
}
/***************
HEADING
***************/
nav h1 {
text-align: center
}
/* logo text */
logo {
text-align: center;
  margin: 0;}
h1 {
  font-family: 'Snippet', sans-serif;
  margin: 15px 0 -5;
  font-size: 1.75em;
  Font-weight: heavy;
  line-height: 1.5em;
}
h2 {
  font-size: 1.0em;
  /***********************
  MARGIN- 1stROW=top, 2nsROW=both sides, 
  3RD NO=bottom.
  ***********************/
  margin: -5px 0 0;
  font-weight: normal;
}
/************************************
NAVIGATION
************************************/
nav{
text-align: center;
  padding: 15px 0;
  margin: 20px 0 0;
}
/*************************************
FOOTER
************************************/
footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}
/***************
PAGE: PORTFOLIO
***************/
gallery li {
  float: left;
  width: 700px;
  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;
}
h1, h2{
  color: #fff;
}
/* links */
h1{
  color: #ffffff;
}
h2{
  color: #ffffff;
}
/* nav color */
nav{
background:#599a68;
}
nav a, nav a:visited {
  color:#fff;
}
/* selected nav link*/
nav a.selected, nav a:hover {
color:#32673f;
}

Sean T. Unwin · Accepted Answer

Is there a reason that the class operator is not shown in your pasted code? e.g. .logo {text-align: center; margin: 0;} -- notice the . at the beginning of logo.
I'm not sure how your HTML is laid out, however, if .gallery and your footer are both nested within .wrapper then your footer would likely display as you mention because .gallery has a declaration of float: left;.
If this is what is causing the issue, I see 3 options( there may be others) to choose from:
Remove the float from .gallery. Although this would depend upon your UI structure.
Place footer outside of .wrapper.
Set footer to clear: both;.

Jessica Brown · Answer

THANK YOU! #3 worked like a charm! You're so smart!

Welcome to the Treehouse Community

Looking to learn something new?

Jessica Brown

Jessica Brown

My footer is stuck on the top of my page, pushing my gallery to the left.

wrapper{

nav h1 {

logo {

gallery li {

gallery li a p {

Jeff Busch

Jeff Busch

Jessica Brown

Jessica Brown

2 Answers

Sean T. Unwin

Sean T. Unwin

Jessica Brown

Jessica Brown