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 CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

Posted by Javano Collins
Javano Collins
9,108 Points

My footer has a bottom margin/padding when the browser is in full size. I don't know why.

Only when my browser is increased to full size the margin/padding bottom appears in the footer.

/* ================================= 
  Base Element Styles
==================================== */

body {
    line-height: 1.6;
    color: #3a3a3a;
}

a { 
    color: #fff;
    text-decoration: none;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Layout Containers ---- */

.container {
  width: 70%;
  margin: 0 auto;
}

.main-header {
    background: #3acec2;
  padding: 1em 0;
}

.main-footer {
  text-align: center;
    padding: 2em 0;
    background: #d9e4ea;
}

/* ---- Page Elements ---- */
Michael Cook
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points

Could you create a snapshot of your project and link it here? It would be easier to tinker with it and figure it out if I could see it.

3 Answers

virus200
virus200
6,583 Points
virus200
virus200
6,583 Points

I did some searching on StackOverflow and this was the change I made to get it to work.

.main-footer {
  text-align: center;
  padding: 2em 0;
  background: #d9e4ea;
  position: fixed;
  bottom: 0;
  width: 100%;
}
Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Hi Javano

What browser are you using?

Can you give a screenshot?

There could be a potential browser default making this happen

Shawn Rossouw
Shawn Rossouw
2,834 Points
Shawn Rossouw
Shawn Rossouw
2,834 Points

If you have any elements inside your footer, check with dev tools if maybe not one of those is causing the issue.